Reverse hover effect on thumbnail portfolio front page items

• 

  issyearbooks · Member · Jun 24, 2015 at 9:02 pm

  • Copy link
  • Add topic to favorites

  I am trying to figure out how to “reverse” the effect of the hover on the thumbnail images on the front page of my site. Right now, a dark gray box covers my images with the title until I hover, then it shows my image. Is there a way to reverse that effect to show the title and gray box only when I hover over the image?

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

• 

  nizamilputra · Member · Jun 25, 2015 at 1:35 am

  • Copy link

  Hi there,

  Try this css;

  .has-post-thumbnail .project-image:hover .project-summary{
    opacity: 1;
  }
  .project-image:hover .project-summary{
    background: rgba(0, 0, 0, 0.5);
  }
  .project-summary{
    opacity: 0;
  }

  Let me know if you need another help.