Proportional Square Images

Design help Animations & Interactions
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

Screen Shot
Screen Shot3646×1729 575 KB

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).

http://builtthings.com/#1

Thank you in advance.

10 pm
10 pm3734×2172 1.09 MB

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.