Como aplicar efectos Fade en imágenes en WordPress

Cuando vi este tutorial en WPBeginner (How to Fade Images on Mouseover in WordPress) me pareció interesante escribir un post en el blog, es una forma estupenda y muy sencilla de añadir un elegante efecto Fade a las imágenes de nuestros post, no es que haga nada en especial pero llama la atención visual de quien pasa el puntero de su ratón sobre cualquiera de las imágenes del post.

Como ya has podido comprobar la imagen de este post se ve ligeramente «apagada» y al pasar el ratón por encima se «enciende» ganando vida y color la imagen, si le añadimos un link gana aun mas interactividad e invita al visitante a hacer clic.

Para aplicar este sencillo y efectivo efecto te recomiendo que utilices un child theme para que cuando actualices tu theme no se pierdan los cambios realizados y tengas que volver a crearlos.

En cualquiera de los casos para aplicar este efecto tenemos que abrir nuestra hoja de estilos de nuestro Theme, style.css, puedes editarla desde tu programa favorito o directamente en la sección de apariencia, Editor, de nuestro WordPress.

Una vez abierta añadimos estas simples lineas:

Y si queremos hacerlo un poco mas complicado podemos añadir las siguientes lineas para que el efecto fade tenga una transición, en este ejemplo 2 segundos de transición:

O rizar el rizo haciendo que el efecto sea al revés y modificar la opacidad de las imágenes añadimos las siguientes lineas:

Lo mejor de todo ? Que podemos jugar con los parámetros hasta encontrar el efecto que mas nos guste.