Add effect to images

• 

  jdavidortizfargas · Member · Mar 27, 2018 at 1:29 am

  • Copy link
  • Add topic to favorites

  I would like to add an effect when you hover on clickable images, similar to this blog: https://lecturasyotrasideas.wordpress.com/

  Thank you in advance!

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

• 

  thesacredpath · Member · Mar 28, 2018 at 7:19 pm

  • Copy link

  Hi there, this will get you a similar effect without the icon in the center. If you wish to have the icon in the center, you will have to upload that to your media library and then you can post a link to it here in the forum and I can help with getting that into the overlay.

  .blog-post-thumb {
    position: relative;
  }
  .blog-post-thumb:hover a::after {
    content: "";
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    z-index: 10;
    display: block;
    outline: 1px solid #fff;
    outline-offset: -20px
  }