Recreate something that i saw on a website - struggling with 100% height

Hello everyone,

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:

https://preview.webflow.com/preview/pixelgiant?utm_medium=preview_link&utm_source=designer&utm_content=pixelgiant&preview=60c60c6673561e23e47e2b162a050119&mode=preview

In your Read Only Link, I couldn’t find any element that looks like “case studies” section in “littlegiant” site.

I assume it is the “Referenzen” section.

@Pixelgiant You need some sort of a content that would take some kind of height inside your link blocks. Currently there is none (both image and overlay content are absolute so they don’t affect the height of the parent) Make your image relative, and it will make your block have a height.

Though to be completely honest I am not sure I understand exactly what you want to do.

thanks mate. I sit there like: ffs why it doesnt work and i didnt get it that the image has to be on relative. Its working now!

1 Like