Hello,
I’m new to Webflow. I tried to create an effect that the image will reveal when hovering the text.
But I don’t know what it went wrong. The image can’t be put behind the text and also the image keeps flashing when I used the cursor to hover it. And also, I can’t click the text to go to the other page as well. Can someone help me on fixing this issue.
Thanks,
Hazel
Hi Hazel,
For someone to be able to take a look and help, best would be for you to include a link to the live site and a link to your Webflow project.
Hi Spirelli,
Thanks for jumping in to help.
Here is the read-only link:
https://preview.webflow.com/preview/hazels-radical-project-be2fe3?utm_medium=preview_link&utm_source=designer&utm_content=hazels-radical-project-be2fe3&preview=3afa5d734b6e0999b806d4fffef93d88&pageId=5ed47e5da0977f388f4d94e6&workflow=preview
Let me know if you can view it.
The image flickers when you hover over it, because doing so stops triggers the Hover Out action on the link below it. Then in turn the link below is visible again, triggering its Hover In action, making the image appear, which triggers Hover Out… and so on…
You need to change your approach. Either have the image not overlay on top of the link that triggers it to appear and disappear (i.e. position it away from that text), or perhaps apply the interaction to hide the image to another element, e.g. a Close button that shows together with the image. You might come up with other ideas…
Ohh i see. Is there any way to put the image behind the text? Even I move the image to the bottom layer but the image is still on top of the text.
You should be able to place image behind the text using z-index and positioning
