How to disable hover effects on mobile devices?

hey!I want to disable the hover effects on my images only on mobile (touch) devices/ mobile browser.At the moment I am using the following CSS for my hover effect:

Do you have any ideas how to disable them on touch devices/mobile browser ?Thanks a lot for your help!

Hmm. I don't see a declaration that controls the hover state of any element.

The

pointer-events: none;

declaration says that every element of the class .image-caption-wrapper is never the target of mouse events. See MDN's Article "pointer-events". (By the way, it appears that you have a space between none and the ;?) So, presumably, on touch devices this would render every such element non-responsive to a touch/tap event. (Is this what you really intend?)

This isn't the same as controlling an element's hover state behavior.

In any event, "hover" has no relevance to touch devices since the device can't sense your finger "hovering" over the screen.

If I misunderstand your question or this isn't helpful, please let me know.

Thank you very much for your response!Actually I am not into coding or CSS or anything. I just collected codes and put them in my CSS, but it is only tentative.So maybe it is easier for you when you understand my goal and we go from there. This is exactly what I want for Images on my page:

So at first, I need a CSS or something to do that.And then I want to disable this effect on mobile/touch devices.

(This will also answer my other question ("Add a call to action button on image hover").)

I hope you understand my problem. Thank you very much again!!