Problem when setting images as absolute

Design help General
1

Hi guys,

I am trying to create an animated text hover effect on the images on this website homepage:

https://preview.webflow.com/preview/thecrimsontree?preview=e25bb8a5c5409bf93b77a447fab52545

I have found the following tutorial: Create an animated text overlay on an image on hover | Webflow Blog

This looks perfect, except when I set each image to absolute it disappears. I’m not sure why, it’s obviously something I’ve got set up somewhere.

Can anyone help me out with this one?

Thank you!

Here is my public share link: https://preview.webflow.com/preview/thecrimsontree?preview=e25bb8a5c5409bf93b77a447fab52545

2

Why do you want the image to be absolute?

3

I’m just going off the guide in the link I posted which says to set them as absolute.

I’ve got the layout set up using flex so this obviously isn’t going to work but I can’t see how to do the text over the image when hovered without.

4

Scrap that…

Just racked my brain, had a play and got it work!

5

Set the text inside the image div and make the interaction for that image div, IMHO you don’t need to position the image absolute to get that result.

In order to make an element absolute you just make sure that the parent element has a position display set other than Auto.

Hope that helps.

1 Like
6

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