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

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

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…

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(6 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

1 comentario en “Tutorial Divi: Efecto blanco y negro al pasar el ratón sobre imágenes destacadas”

  1. como pudiera hacer para que fuera al reves es decir que las imagenes se vean en blanco y negro y que al pasar el raton se vean los colores

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido