Project hover overlay

Design help Layout & Design
1

Hi, I’m a beginner at web flow and I’ve been having some issues making a responsive image hover effect for my project pages. I’m able to make the base images adjustable between point breaks by using percentages, however I’ve been struggling to do the same with the div containing the text and image overlay. Whenever I set the divs size using percentages it’s not the same size as the base image but if I make it a set size using pixels it’s no longer responsive.

Does anyone have any advice or tutorials they know of I can reference? I was struggling to find one on youtube or webflow.

(navigate to projects page to see what I originally had and workshop page to see my attempt at a responsive layout)

Here is my site Read-Only: Webflow - Emma Petit

2

You will probably find it simpler to adjust your structure to something like this;

A - project div max / also link / also hover interaction trigger 
  DIV - overlay
    ... overlay stuff
  IMG - thumbnail image
  • A would be position relative
  • Both the DIV and IMG;
    • would be position absolute
    • would fill the A container, 100% 100%

This way your contents align and are goverened by the container.
And the interaction’s job is just is simply to show/hide the overlay DIV.

Also, collections are your friend.

3

Actually I am little bit confused about your question. Can you explain it clearly ?

4

Hi Michael, I appreciate you responding! I’m having some issues trying to implement the instructions you gave to fix the issues. This is what I have so far and it looks like a mess, are you able to tell me what I’m doing wrong?

https://preview.webflow.com/preview/emmas-portfolio-dcafdc?utm_medium=preview_link&utm_source=designer&utm_content=emmas-portfolio-dcafdc&preview=343ae484c6c9db264b6dcfd61edde3bd&pageId=674f4ddbe3fd6b1100d8b3c6&workflow=preview

5

So basically I have a projects page and when you hover over each of the images it will link to a new page and reveal more information about the project.

The issue I’m having is making the the images and divs containing the overlay stuff flexible between point breaks. The images I can make flexible in the grid by setting the size to 100% but that’s not working for the divs. So when the screen size increases the images get bigger but the divs stay the same size and don’t adjust with them.

Does that make more sense? If not I can include pictures to try to explain it more clearly

6

The structure I showed above is pretty simple.
Here’s a demo;

https://test-overlay-6cb69b.webflow.io/

https://preview.webflow.com/preview/test-overlay-6cb69b?utm_medium=preview_link&utm_source=designer&utm_content=test-overlay-6cb69b&preview=ea7d45a10099a2e8a34303b3ddfcaacc&workflow=preview

7

Okay got it, thanks for the example that cleared things up for me!!