Help with Overlay Opacity Interaction, Please

Hello!

I am trying to set an interaction on a CMS grid layout where opacity starts at 0 and goes to 100 when i have over it. I have the parent set to relative and the overlay set to absolute-full but when I preview the interaction the overlay is going beyond the image itself. Pics attached and link below if you can please take a look to see what im doing wrong.

Here is my public share link: https://preview.webflow.com/preview/bayonnebusinessgrowth?utm_medium=preview_link&utm_source=designer&utm_content=bayonnebusinessgrowth&preview=d1e70819eab945a41ec898d07345d628&pageId=5f54f7b87fa9929ae0023576&mode=preview

hi @Kevyn_Levine your overlay is always on the top. I do not see any problem

Thanks for checking - do you see that the overlay is expanding beyond the image on left and right in a rectangle rather than the square of the grid item?

hi @Kevyn_Levine that’s correct bahaviour as your overlay filling the grid

I understand now! If i want it to just cover the image what can i do?

hi @Kevyn_Levine you have to expand image to take width of grid container. I understand that is your first request on this forum and you are welcome in community. I will suggest you can watch Webflow University to get at least some basics before you will ask how to work with Webflow.

EDIT
You should watch all videos but here is one specific LINK you can watch now.

If you have got an answer to your question please feel free to check any response as solution to be this request marked as solved :wink:

1 Like