Style Your Posts With a Gray-scale Hover Effect

Style Your Posts With a Gray-scale Hover Effect

CSS3 Filters add fun effects to Project, Post, and Product images. This combined with CSS transformations, users can create a fading effect on hover. After adding this CSS, your blog, portfolio, and store thumbnails will fade to black & white on hover. To apply this CSS, just simply copy and paste the following code into the Custom CSS box in ePanel and click Save. If you decide to revert to the original style, just delete the code from the Custom CSS field.

/*DIVI POST, PROJECTS, and PRODUCTS - B&W HOVER STATE*/
  
.et_shop_image:hover, .et_portfolio_image:hover, .et_pb_post img:hover {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,#grayscale");
    filter: grayscale(100%);
}
 
.et_pb_post img{-moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s}
.et_overlay {background: rgba(255, 255, 255, .25);}
.et_overlay:before {color: #fff !important; text-shadow: 0 1px 3px rgba(0,0,0,.3);}
.et_shop_image:hover .et_overlay, .et_portfolio_image:hover .et_overlay { opacity: 1; border: 0 solid #e5e5e5;}