Streaming live at 10am (PST)

Proportional Square Images

Hi There

I’ve been following Dave’s movie below regarding creating square grid div structure with images

The video is great and clear however as soon as I put my Box Class to Auto rather than pixel height everything disappears, can you help? This is irrespective if I place the Div in a container or straight into a section across screen.

My Project:

https://preview.webflow.com/preview/safy-tashkandy?preview=61947f3726117320e09c4356640348ef

Thank you for your help.

Hi @saff, thanks for your post. Could you also post a screenshot showing the page and location of the grid in the navigator?

Thanks in advance.

Hi Dave, thank you. Please see attached.

The moment I make the Div Block 50% Width it disappears.

Hi Dave

Essentially I am trying to recreate a section much like the “featured work” section on the site below, including the hover effects. I have worked out how to do the effects with a background embedded and another div ontop for the text, however I want it always to remain square on all screen widths. If I use an image, it works, however I can’t get a DIV over the image to create the animated text overlay (in interactions).

Thank you in advance.

Hi Saff,

For the text overlay you can try:

  1. Set the position of the container of the square image (in your case Div Block 2) as relative,
  2. Inside the container, put a new div
  3. Set the new div to absoute position, z-index = 1, width and height = 100%
  4. put your overlays inside the div

This creates an overlay on top, which occupies the whole area of the image. Cheers!

Thank you Dave, I will give this a go, much appreciated.

Dave you’re a star, it worked , Thank you.

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.