blend modes on hover

• 

  callumkellie · Member · December 10, 2014 at 3:25 pm

  • Copy link
  • Add topic to favorites

  Hi There, long time listener first time caller.
  The blog in question is
  http://graysartschoolaberdeen.com/

  The effect I want to create is a colour overlay on hover on the blog post feature images on the home page. Similar to the hover on the Projects but I dont need the scaling just a colour overlay. I was attempting this using multiply blend modes and colour backgrounds with no success. I currently have a opacity change and box shadow on hover (see code below). Is the overlay effect possible? Thanks in advance.

  #home-posts.home-section a:hover img {
  opacity: 1;
  transition: opacity .55s ease-in-out;
  -moz-transition: opacity .55s ease-in-out;
  -webkit-transition: opacity .55s ease-in-out;
  box-shadow: 0px 5px 10px rgba(0,0,0,.3) ;
  }

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

• 

  themetrust · Theme Author · December 10, 2014 at 4:24 pm

  • Copy link

  This CSS will set a background color for the a tag wrapping the image. Now you just need to get rid of the CSS that set the opacity of the image, and instead reduce the opacity on hover.

  #home-posts.home-section .small a {
    background-color: yellow;
    display: block;
  }
  
  #home-posts.home-section .small h2 a, #home-posts.home-section .small .moreLink a {
    background: none;
  }

• 

  callumkellie · Member · December 11, 2014 at 10:00 am

  • Copy link

  That’s brilliant worked first time! been banging my head against that one most of this week!

• 

  themetrust · Theme Author · December 11, 2014 at 1:14 pm

  • Copy link

  Glad I could help.