Cómo desvanecer imágenes al pasar el ratón por encima en WordPress (Simple y fácil)

Aunque parezca poca cosa, una de las cosas que a veces añadimos a nuestros sitios de WordPress es una simple animación de fundido de entrada o de salida cuando un usuario pasa el ratón por encima de una imagen. Es una forma sutil pero eficaz de hacer que nuestros sitios sean más atractivos e interactivos.

Hemos descubierto que estas pequeñas señales visuales pueden marcar una gran diferencia en la forma en que los visitantes interactúan con nuestro contenido. No se trata sólo de hacer que el sitio parezca más bonito: estas animaciones pueden animar a los visitantes a explorar más nuestro contenido.

En este artículo, le mostraremos cómo añadir este efecto de desvanecimiento de imagen al pasar el ratón por encima en WordPress.

¿Por qué se desvanecen las imágenes al pasar el ratón por encima en WordPress?

Las animaciones son una forma sencilla de hacer más interesante su sitio web e incluso pueden atraer la atención del visitante hacia el contenido más importante de su página, como el logotipo de su sitio web o una llamada a la acción.

Hay muchas formas de utilizar animaciones CSS en WordPress, pero añadir un efecto al pasar el cursor sobre las imágenes es especialmente eficaz. La animación de desvanecimiento significa que tus imágenes aparecerán o desaparecerán lentamente cuando los visitantes pasen el cursor sobre ellas.

Esto anima a los usuarios a interactuar con las imágenes e incluso puede añadir un elemento narrativo a la página. Por ejemplo, las imágenes pueden aparecer y desaparecer a medida que el visitante se desplaza por la página.

A diferencia de otras animaciones, el efecto de desvanecimiento de la imagen al pasar el ratón por encima es sutil, por lo que no afectará negativamente a la experiencia de lectura del visitante ni a la optimización de la imagen que haya realizado.

Dicho esto, vamos a mostrarte cómo añadir un fundido a tus imágenes al pasar el ratón por encima en WordPress. Simplemente utilice los enlaces rápidos a continuación para saltar directamente al método que desea utilizar:

Método 1: Añadir desvanecimiento de imagen al pasar el ratón por encima a todas las imágenes de WordPress

La forma más sencilla de añadir un efecto de fundido a todas tus imágenes es utilizando WPCode. Este plugin gratuito te permite añadir fácilmente código personalizado en WordPress sin tener que editar los archivos de tu tema.

Con WPCode, incluso los principiantes pueden editar el código de su sitio web sin arriesgarse a cometer errores y erratas que pueden causar muchos errores comunes de WordPress.

Lo primero que tienes que hacer es instalar y activar el plugin gratuito WPCode. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, diríjase a Fragmentos de código ” Añadir fragmento.

Aquí verás todos los fragmentos de código WPCode que puedes añadir a tu sitio. Estos incluyen un fragmento de código que te permite desactivar completamente los comentarios, subir tipos de archivo que WordPress no suele soportar, desactivar páginas de adjuntos, y mucho más.

Simplemente pase el ratón por encima de “Añada su código personalizado” y haga clic en “+ Añadir fragmento de código personalizado” cuando aparezca.

Para empezar, escriba un título para el fragmento de código personalizado. Puede ser cualquier cosa que le ayude a identificar el fragmento en el escritorio de WordPress.

Para añadir CSS personalizado a WordPress, abra el menú desplegable “Tipo de código” y seleccione “Fragmento de código CSS”.

En el editor de código, añada el siguiente fragmento de código:

img:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

Este fragmento de código desvanecerá cada imagen durante 2 segundos cuando el usuario pase el cursor sobre ella. Para hacer que la imagen se desvanezca más lentamente, simplemente sustituye ‘2s ease’ por un número mayor. Si quieres que la imagen se desvanezca más rápido, entonces usa ‘1s ease’ o un número menor.

También puedes hacer que la ” opacidad ” sea mayor o menor cambiando la línea opacidad:0,6.

Si cambias alguno de estos números, asegúrate de cambiarlos en todas las propiedades (webkit, moz, ms y o) para que el efecto de desvanecimiento se vea igual en todos los navegadores.

Cuando estés satisfecho con el fragmento de código, desplázate hasta la sección “Inserción”. WPCode puede añadir tu código en diferentes lugares, como después de cada entrada, solo en portada / vista pública, o solo para administradores.

Para añadir un efecto de fundido a todas tus imágenes, haz clic en “Insertar automáticamente” si aún no está seleccionado. A continuación, abre el menú desplegable “Ubicación” y elige “Cabecera para todo el sitio”.

A continuación, desplácese a la parte superior de la pantalla y haga clic en el conmutador “Inactivo” para que cambie a “Activo”.

Por último, haga clic en “Guardar fragmento” para activar el fragmento de código CSS.

Ahora, si pasas el ratón por encima de cualquier imagen de tu sitio web WordPress, verás el efecto de desvanecimiento en acción.

Método 2: Añadir animaciones de fundido de imágenes a páginas individuales

Utilizar un efecto de fundido para cada imagen puede distraer, sobre todo si tienes una galería de fotos en tu sitio web, una tienda de fotos de archivo o cualquier otro sitio que tenga muchas imágenes.

Teniendo esto en cuenta, es posible que desee utilizar efectos de fundido solo en una página o entrada específica.

La buena noticia es que WPCode le permite crear shortcodes personalizados. Puedes colocar este shortcode en cualquier página, y WordPress mostrará los efectos de fundido solo en esa página.

Para ello, basta con crear un fragmento de código personalizado y añadir el código de animación de desvanecimiento siguiendo el mismo proceso descrito anteriormente. A continuación, haga clic en el botón “Guardar fragmento de código”.

A continuación, desplácese hasta la sección “Inserción”, pero esta vez seleccione “Shortcode”.

Esto crea un shortcode que puedes añadir a cualquier página, entrada o área preparada para widgets.

A continuación, active el fragmento de código siguiendo el mismo proceso descrito anteriormente.

Ahora puedes ir a cualquier página, entrada o área preparada para widgets y crear un nuevo bloque ‘Shortcode’. A continuación, sólo tiene que pegar el shortcode WPCode en ese bloque.

Para obtener más información sobre cómo colocar el shortcode, consulte nuestra guía sobre cómo añadir un shortcode en WordPress.

Una vez hecho esto, haga clic en el botón “Actualizar” o “Publicar” para activar el shortcode. A continuación, puede visitar esa página, página, o widget de área lista para ver el fundido sobre el efecto del ratón.

Método 3: Añadir animaciones a las imágenes destacadas

Otra opción es añadir animaciones a las imágenes destacadas o a las miniaturas de las entradas. Estas son las imágenes principales de la entrada.

Desvaneciendo las imágenes destacadas al pasar el ratón por encima, puede hacer que su sitio sea más llamativo y atractivo sin necesidad de animar todas y cada una de las imágenes de su blog o sitio web de WordPress.

Para añadir una animación de fundido a las miniaturas de tus entradas, sólo tienes que crear un nuevo fragmento de código personalizado siguiendo el mismo proceso descrito anteriormente.

Sin embargo, esta vez, añade el siguiente código al editor:

img.wp-post-image:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

A continuación, desplácese hasta la casilla “Inserción” y seleccione “Inserción automática”.

A continuación, abra el menú desplegable “Ubicación” y elija “Cabecera para todo el sitio”.

A continuación, puede activar el fragmento de código siguiendo el mismo proceso descrito anteriormente.

Ahora, puede pasar el cursor sobre cualquier imagen destacada para ver la animación de fundido en acción.

Si desea añadir aún más efectos al pasar el cursor sobre las imágenes, consulte nuestra guía sobre cómo añadir efectos al pasar el cursor sobre las imágenes en WordPress.

Efectos adicionales para añadir a sus imágenes de WordPress

Los efectos de fundido son una forma divertida de hacer las imágenes más interesantes, pero hay muchas más formas de utilizar animaciones en WordPress. Por ejemplo, puede utilizar animaciones flipbox para revelar texto cuando un visitante pasa el cursor sobre una imagen o efectos de zoom para que los usuarios puedan explorar una imagen con más detalle.

Aquí tienes otros efectos interesantes que puedes añadir a tus imágenes:

• Cómo añadir filtros de fotos tipo Instagram en WordPress (paso a paso)
• Cómo mostrar fotos del antes y el después en WordPress (con efecto deslizante)
• Cómo añadir sin hacer clic derecho en las imágenes de WordPress
• Cómo crear imágenes interactivas en WordPress
• Cómo añadir fácilmente imágenes interactivas de 360 grados en WordPress

Esperamos que este artículo te haya ayudado a aprender cómo difuminar imágenes al pasar el ratón por encima en WordPress. También puedes consultar nuestra guía práctica sobre cómo organizar los archivos de WordPress en carpetas de biblioteca de medios y nuestra selección de los mejores plugins y herramientas de imágenes destacadas para WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.