Img Lightens With Mouseover

• 

  thepeedmont · Member · Apr 27, 2017 at 9:57 am

  • Copy link
  • Add topic to favorites

  What’s the cleanest CSS to make img’s lighten with a mouseover?

  The blog I need help with is: (visible only to logged in users)

• 

  otpidusprime · Member · Apr 27, 2017 at 10:01 am

  • Copy link

  Hello @thepeedmont,
  You can use this CSS to lighten image on mouseover:

  img:hover {
      opacity: 0.8;   /*reduce this value to lighten more*/
  }

  But it will lighten all the images on your site, including your header logo as well. If you do not want that and just want the images of the main site content to lighten, then use this CSS:

  .main img:hover {
      opacity: 0.6;   /*reduce this value to lighten more*/
  }

  Hope this helps 🙂