Remove image hover effects

Hi @jmfcodes,

I’ve checked the images on glutenfreerv.com and I’m not seeing any hover effects when placing my cursor over the top.

Were you able to get this sorted? Or do you mean you want to remove the semi transparent colour on the background images?

Hi @jmfcodes,

Thanks for the links. I can’t see a hover effect on the linked images I’m afraid. This is what I’m seeing:

Sreenshot

I also checked this post on the Afterlight theme demo site and I’m not seeing a hover effect on the linked image.

Which operating and system and browser are you using when the hover effect is visible? Would you also be able to make a screenshot of what is happening and upload it to a service like Snaggy?

The photo of Tycho the cat made me laugh 🙂

Hi @jmfcodes,

Thanks — the browser and OS information resulted in a Eureka moment! It looks like this theme contains some browser specific CSS (Firefox) which is adding the hover effect. This CSS should remove it though:

a:not([class*="screen-reader-"]):hover,
a:not([class*="screen-reader-"]):focus {
    opacity: 1;
}

I’ve actually been able to replicate this behaviour in Firefox macOS now. I missed it the first time because the hover effect takes a good couple of seconds to load but I had moved my cursor off the image before then — which made it look like there was no hover effect.

Let me know if the CSS above works — it has done the trick in Firefox on macOS.