Opacity Hover CSS

• 

  courtneyfane · Member · Dec 13, 2016 at 4:42 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I am trying to create and opacity hover for just a few images on my main page. The images are Illustrations, Print, Invitations, Branding and Photography.

  Is there a way to do that?

  Thanks,
  Courtney

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

• 

  thesacredpath · Member · Dec 13, 2016 at 7:40 pm

  • Copy link

  Hi Courtney, add the following to your custom CSS and you can adjust the color as desired. To create a opacity on a color, we have to use RGB colors and set an alpha transparency. Between the parentheses, the first three (0 in my example for black) are the RGB color, and the last (0.4) is the transparency/opacity. The closer to 0, the more transparent, the closer to one, the more opaque.

  .header-widget-area-wrapper .widget_image a:hover {
  	display: block;
  	background-color: rgba(0, 0, 0, 0.4);
  }