Help please on image hover with overlay and text in CMS

Design help General
1

Hello Good people of webflow. I am trying to add an image overlay with a 50% black opacity so when you hover on the image the name of the project shows up with an overlay ontop. All done within a CMS collection.

I have included a link of my project below. Any help would be greatly appreciated !

Here is my public share link: https://preview.webflow.com/preview/efosas-fantabulous-project-4eded6?utm_medium=preview_link&utm_source=designer&utm_content=efosas-fantabulous-project-4eded6&preview=ac9495e0c8f664d0d8dfb8ba65736617&pageId=6162bcb104ce9f595253e1a2&workflow=preview
(how to access public share link)

2

It doesn’t matter if it’s in a collection. What you want to do is to superimpose two elements, so the element that is going to superimpose on the other must be on “absolute”.But the parent block must be on “Relative” to contain the “absolute” block.

The structure :

–the wrapper (“relative” position)
---------The image
---------The overlay-block (“absolute” position which covers everything=>square icon)

Then you put what you want in the overlay-block but its “opacity” is at 0%.
Then you create an animation when the mouse passes over it that sets the opacity of the overlay-block to 100% and another that sets it back to 0% when the mouse is no longer over the wrapper.

2 Likes
3

Hi Romuald_Jay,

Thank you so much for your help!!! This worked like a charm!! Really like how you broke down the structure too. I understand the process a lot better now.

Many thanks!

1 Like
4

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