Tutorial Divi: Efecto blanco y negro al pasar el ratón sobre imágenes destacadas

Publicado por Fernando el 1 Mar, 2017

En Divi puedes crear un efecto muy chulo que puedes aplicar, de manera que al pasar el ratón sobre la imagen destacada de una entrada de blog, portfolio o producto de tu tienda, esta cambie a blanco y negro, en realidad a escala de grises.

Para ello añade este poco de CSS en la hoja de estilos de tu tema hijo:

/* Cambiar imagen destacada a escala de grises al pasar el raton */
  
.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,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#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;}

/* Cambiar imagen destacada a escala de grises al pasar el raton */

.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,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");

filter: grayscale(100%);

}