I would like to create one specific section on this site: https://www.littlegiant.co.nz/
The specific section is the “case studies” section. Just scroll down the littlegiant main page.
I shared my read only link where i tried to recreate it.
I think grid is the best way to recreate this. I have in each area of the grid an link block within an image and a div-block(which is the div-blick that get visible by hovering over it like on little giant website). The link-block is relative. The image and div-block is absolute.
So when i try to give the div-block 100% height it doesnt work because i dont have a fixed height in px. The grid rows are on auto. But it has to be on auto because when the browser window get smaller the images should be repsonsive. And on the website littlegiant it seems to work with the height 100% without a fixed height, i dont know why. Also IF i give it a fixed height the image or the grid arent responsive anymore.
I hope you understand where im struggling at and can help me. Maybe it has to be done in a totally different way, i dont know. The goal is get it look and work like on the littlegiant website. Also on the littlegiant website it is done with flex but i tried it with grid and also in flex… Im struggling all the time at the same point that the one div-block dont want to get to 100% height. You can see it on the screenshot number 2, how it looks all the time.
Here is my site Read-Only: