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

Publicado Por Fernando Tellado 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%);

}

.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;}

Este bonito efecto se aplicará a las imágenes destacadas de los módulos portfolio, blog y tienda, y lo que consigues es pasar de esto…

A esto otro…

Si te gusta este contenido prueba tambien a suscribirte al canal en YouTube.

AVISO: esta publicación es de hace dos años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.