Streaming live at 10am (PST)

Proportional Square Images


#1

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.


#2

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.


#3

Hi Dave, thank you. Please see attached.

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


#4

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.


#5

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!


#6

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


#7

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


#8

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