Hover effect on image with overlapping text on top

Hey!
I hope I can properly describe this: I want to set a hover effect on an image with two styles: Opacity and greyscale. No issues with that. But I also want a Headline overlapping that image, not affecting the hover trigger. The hovereffect should trigger when the curser is above that image, no matter if there is text in the way. So right now everything works fine, but when the curser moves over the overlapping Part of the text, the hover effect stops. I have already tried many different types of Layouts, grouping different elements. And right now the effect is built with a trigger and not with the hover function.

What is the best way to build that?
Thanks in advance!

Marc

I

1 Like

Hey Marc,

I am pretty sure that you would implement a pointerevents:none to that text.

  1. Get an HTML Embed element

  2. Toss it right under the body element in your layers panel

  3. Insert this into the code box that pops up:

     <style>
         .div_block_4 {
             pointer-events:none;        
         }
         .h1 {
             pointer-events:none;
         }
     </style>
    
  4. Change the name of the div that is holding your ā€œh1ā€ element on your site to div_block_4

Hope this helps!

(PS change the hover out animation of your desaturation animation from Grayscale to Saturation)

1 Like

Hey Matthew,
thanks a lot for your help. I thought there is a solution within webflow (I am not a coder, as you might have thought :grin: ) . But i will try your code as soon, as I get the paid version of webflow.
Thanks!

All good man! And Iā€™m sure there is a webflow native solution! (To be honest, I need to use that all as well for a couple sites of mine) So if you find it, please let me know! And I will do the same!

1 Like