Mouse hover outside the div block

Design help General
1

Hello, I have a text that appears in the middle of the screen while hovering an image.
The problem is that since the text block is inside the image div block, the hover still happening and consequently showing the text even when I’m out of the image.

How to experience this problem: mouse hover the image and quit the image keeping the mouse over the text and you will see what I mean.

I would like to quit the text as soon as I leave the image mouse hover.
I’ve tried to place this text div outside the image div and some bugs happened.

Does someone know a way to make it happen?

Thanks,

Here is my site Read-Only: https://preview.webflow.com/preview/books-i-love-c10dca5a91af7404791688d587?utm_medium=preview_link&utm_source=designer&utm_content=books-i-love-c10dca5a91af7404791688d587&preview=bc443fde02b3adb43ab8c742ec68e862&mode=preview

2

Hey @dennyhartanto, do you have any idea about this? This is the one you helped me to achieve.

Thanks.

3

It works for me. Are you still experiencing this issue?

4

Hey @joejola, yes.
Did you try to leave the image keeping the mouse over the text that appears? That is the actual problem.
If you leave the image keeping the mouse out of the text, it works.

5

Okay, I see now. Do you want to keep the click interaction too? When I click on the image, I can’t close.

6

Yes. I want to keep that interaction.

In the real project, the tap opens a modal, but for this webflow example I posted here, I removed to try to focus only on this mouse hover behaviour.

7

Hey, @joejola did you get anything? I’m still trying to figure out how to make it work.

Thank you

8

Here is a way that might work for you.
I created an example project so you can check out the way I set it up.

Published site

Read-only link

I hope this helps :slight_smile:

9

Hello @Eli11 thanks for this.
I did exactly what you did and almost worked properly.
The only thing that went wrong was that the text is appearing behind the image.
You set the hover text with z-index:1 and the hover trigger with z-index:2. I don’t understand why your text is appearing properly over the image if the image has a higher z-index value.

If I change the z-index, the animation doesn’t work anymore.

This is my example following what you did:
https://preview.webflow.com/preview/912c508428bdd7f5d6a5dae496?utm_medium=preview_link&utm_source=designer&utm_content=912c508428bdd7f5d6a5dae496&preview=9f4368124d76c3875fdb1f580398b4f7&mode=preview

Thanks

10

I didn’t set any z-index to the image.

There’s 3 elements to it. One parent div (with the background image), and 2 children divs, one is the trigger, and the other is the text.

The parent has a set size, has its background image set.
The text div is set to position fixed and z-index 1 (display flex to show the text centered).
The trigger div has a set height and width of 100% and z-index 2, so its above the text div.
Now set the interaction to the trigger. This should work.

11

Hello @Eli11, is there any reason for not using an image element for the hover trigger?
I see you are setting the image as a background for the parent div. If I do that, it works.
But I would like to have a separate div block with the image so I can have more freedom to play with the image.

I really appreciate your help.

Thanks.

12

The idea is to have the trigger set higher (z-index) than the popup text, so you should have control over it when the popup is open.
If you will put the image in the trigger div layer, it will show on top of the popup text.

13

Thank @Eli11 it worked nicely!
I really appreciate your help with this.

14

I have the same problem that I cannot solve.

15

I hope my solution works for you as well :slight_smile:

16

Hello @Eli11, I just came across a different problem that you might be able to help me.
I created an interaction related to other elements on my website and this interaction seems to be affecting the mouse hover behavior we setup.

The read-only link is here so you can see exactly what’s happening:
https://preview.webflow.com/preview/mousehovert-7de83ebb74d05841832daf3ecc?utm_medium=preview_link&utm_source=designer&utm_content=mousehovert-7de83ebb74d05841832daf3ecc&preview=42692d0aca77b1634583b3bf3ff8f831&mode=preview

First, you hover the mouse over the images and everything works well. Now, click on ‘About’ on the navbar and then back to the home clicking on ‘Back to home’, after this, the mouse hover interaction doesn’t work properly anymore. They’re not fixed while scrolling and are not respecting the position properties anymore.

I’m not sure why this is happening but it seems to be something related to the animation where I move the whole website div to the bottom when I click on ‘About’. I tried different changes and setups, but without any success.

Do you have any idea about what’s happening?

Thanks.