Title: Remove image hover effects
Last modified: January 6, 2019

---

# Remove image hover effects

 *  Resolved [jmfcodes](https://wordpress.org/support/users/jmfcodes/)
 * (@jmfcodes)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/remove-image-hover-effects/)
 * I would like to remove all image hover effects in the theme. I have tried adding`
   background-color: transparent` and setting opacity to 1 for `a img:hover, a img:
   active`, without success.
 * Thanks so much in advance for any help you can offer.
    -  This topic was modified 7 years, 3 months ago by [jmfcodes](https://wordpress.org/support/users/jmfcodes/).
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fremove-image-hover-effects%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [Gemma Evans](https://wordpress.org/support/users/gemmaevans/)
 * (@gemmaevans)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/remove-image-hover-effects/#post-11063355)
 * Hi [@jmfcodes](https://wordpress.org/support/users/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?
 *  Thread Starter [jmfcodes](https://wordpress.org/support/users/jmfcodes/)
 * (@jmfcodes)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/remove-image-hover-effects/#post-11064981)
 * Hi Gemma! I wasn’t able to fully sort this out yet. It looks like the effect 
   specifically applies to images that are links, like here:
 * [https://glutenfreerv.com/2019/01/06/tycho-the-cat/](https://glutenfreerv.com/2019/01/06/tycho-the-cat/)
   
   [https://glutenfreerv.com/2019/01/06/installing-an-rv-slide-awning/](https://glutenfreerv.com/2019/01/06/installing-an-rv-slide-awning/)
 * I guess the workaround for now is to make the pictures unclickable.
 *  [Gemma Evans](https://wordpress.org/support/users/gemmaevans/)
 * (@gemmaevans)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/remove-image-hover-effects/#post-11072127)
 * Hi [@jmfcodes](https://wordpress.org/support/users/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](https://cloudup.com/cp7QCgd9MNi)
 * I also checked [this post on the Afterlight theme demo site](https://afterlightdemo.wordpress.com/2011/07/07/renfields-inn-with-its-swinging-sign/)
   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](https://snag.gy)?
 * The photo of Tycho the cat made me laugh 🙂
 *  Thread Starter [jmfcodes](https://wordpress.org/support/users/jmfcodes/)
 * (@jmfcodes)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/remove-image-hover-effects/#post-11074657)
 * I am using Firefox on Ubuntu… but I just checked with Opera, and I’m not seeing
   the effect.
 * How very bizarre!
 * Here is an example of the background image showing through the primary image 
   at mouseover: [https://snag.gy/rF7Pvg.jpg](https://snag.gy/rF7Pvg.jpg)
 * Tycho is an endless source of laughs around here 🙂
    -  This reply was modified 7 years, 3 months ago by [jmfcodes](https://wordpress.org/support/users/jmfcodes/).
 *  [Gemma Evans](https://wordpress.org/support/users/gemmaevans/)
 * (@gemmaevans)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/remove-image-hover-effects/#post-11077172)
 * Hi [@jmfcodes](https://wordpress.org/support/users/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.
 *  Thread Starter [jmfcodes](https://wordpress.org/support/users/jmfcodes/)
 * (@jmfcodes)
 * [7 years, 3 months ago](https://wordpress.org/support/topic/remove-image-hover-effects/#post-11082646)
 * oh wow!! that did the trick! Thanks so much!
 * Thanks also for the learning moment– I hadn’t realized browser-specific aesthetic
   features were a thing for themes. This will help in the future.
 * Cheers!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Remove image hover effects’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/afterlight/1.0.3/screenshot.png)
 * Afterlight
 * [Support Threads](https://wordpress.org/support/theme/afterlight/)
 * [Active Topics](https://wordpress.org/support/theme/afterlight/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/afterlight/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/afterlight/reviews/)

 * 6 replies
 * 2 participants
 * Last reply from: [jmfcodes](https://wordpress.org/support/users/jmfcodes/)
 * Last activity: [7 years, 3 months ago](https://wordpress.org/support/topic/remove-image-hover-effects/#post-11082646)
 * Status: resolved