Hover over image diabled fore mobile version but not right

Hi there

I have disabled the hover effect for the mobile version of my site, but on this page there is an issue. I want the black and white image only to appear. Currently, the colour image first appears and then the black and white image fades in over it.

https://www.gregrawson.com/about

Can you tell me how to make that colour image not appear at all on mobile? Only for this "about" page, none of the others on the site.

This is the current CSS for this image:

/* Change Image on Hover */

@media screen and (min-width:992px) {
#block-0caff5f46a51d3dfea13{
    opacity: 0;
    -webkit-transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out
}

#block-0caff5f46a51d3dfea13:hover {
    opacity: 1
}
}

Thank you.

Try this CSS Code

@media screen and (max-width:767px) {
#block-0caff5f46a51d3dfea13 {
-webkit-transition: unset !important;
-o-transition: unset !important;
transition: unset !important;
}
}

Hi. Thanks, that didn't work for me. The mobile issue is still there and it affected the hover on the desktop version too (giving it the same issue as the mobile version).

Never resolved unfortunately :(