How to let 2 different ID's interact with same object?

Hello there!

I am kind of stuck and would really appreciate if someone could help me! 🙂

The Problem: On my website I have an image (on which I applied a hover effect, which triggers a zoom-in and inverse-grayscale effect). So if you hover over the image some fancy stuff happens. On top of the image I placed a H1 title. So as soon as I hover over the H1, the effects from the image return to default. Is there a way the effects stay visible while hovering over the H1?

Here is the code I used for the hover-effects on the image:

#block-yui_3_17_2_1_1704269165979_5456 img {filter: grayscale(100%);}

#block-yui_3_17_2_1_1704269165979_5456:hover img {filter: grayscale(0%);
  transform: scale(1.05);
transition: .4s ease-in-out;}

#block-yui_3_17_2_1_1704269165979_5456 img {transform: scale(1);
transition: .4s ease-in-out;}

Thanks in advance!

1 hour ago, Ewta said:

if you hover over the image some fancy stuff happens. On top of the image I placed a H1 title. So as soon as I hover over the H1, the effects from the image return to default. Is there a way the effects stay visible while hovering over the H1?

It depends. Do you need users to click the title or not? If you don't, you can prevent pointer events (hovering/clicking) for the h1 title and this should resolve the issue. Forum users will need a link to the page to provide more detailed help.

Link --> https://www.ewantanner.ch/home (you need to scroll down a little)

If possible to click the title, it would be very helpful! Thanks.

Thank you very much! This was exactly what I was looking for!