Cómo hacer que las imágenes se desvanezcan al pasar el ratón en WordPress (Simple y fácil)

¿Alguna vez has querido darle un toque especial a las imágenes de tu sitio web? Hablamos de un pequeño toque profesional que hace que tu sitio se sienta más interactivo sin ser molesto.

En WPBeginner, hemos descubierto que un simple efecto de desvanecimiento al pasar el ratón es una solución perfecta. Es una animación sutil que anima suavemente a los visitantes a interactuar con tu contenido visual.

Este pequeño ajuste puede marcar una gran diferencia en la sensación general de tu sitio, y es sorprendentemente fácil de configurar. No necesitas ser un experto en codificación para lograrlo.

En esta guía, te mostraremos exactamente cómo agregar el efecto de desvanecimiento de imágenes al pasar el ratón en WordPress.

¿Por qué desvanecer imágenes al pasar el ratón en WordPress?

Las animaciones son una forma fácil de hacer que tu sitio web sea más interesante e incluso pueden atraer la atención del visitante hacia el contenido más importante de tu página, como el logo de tu sitio web o un llamado a la acción.

Hay muchas maneras diferentes de usar animaciones CSS en WordPress, pero agregar un efecto de pasar el ratón a las imágenes es particularmente efectivo. La animación de desvanecimiento significa que tus imágenes aparecerán o desaparecerán lentamente cuando los visitantes pasen el ratón sobre ellas.

Esto anima a las personas a interactuar con tus imágenes e incluso puede añadir un elemento narrativo a la página. Por ejemplo, diferentes imágenes podrían aparecer y desaparecer gradualmente mientras el visitante se mueve por la página.

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

Dicho esto, te mostraremos cómo añadir un desvanecimiento a tus imágenes al pasar el ratón en WordPress. Simplemente usa los enlaces rápidos a continuación para ir directamente al método que deseas utilizar:

• Método 1: Añadir desvanecimiento de imagen al pasar el ratón a todas las imágenes de WordPress
• Método 2: Añadir animaciones de desvanecimiento de imagen a páginas individuales
• Método 3: Añadir animaciones de desvanecimiento de imagen a imágenes destacadas
• Preguntas frecuentes (FAQs)
• Recursos adicionales para efectos y gestión de imágenes

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

La forma más fácil de añadir un efecto de desvanecimiento a todas tus imágenes es usando el plugin gratuito WPCode. Es el plugin de fragmentos de código más potente y fácil de usar para WordPress, y te permite añadir código personalizado sin tener que editar los archivos de tu tema.

Esto es mucho más seguro porque el plugin ayuda a prevenir errores que pueden causar errores comunes de WordPress. Para más detalles sobre todas sus funciones, puedes leer nuestra reseña completa de WPCode.

Consejo de experto: En WPBeginner, usamos WPCode para administrar todos los fragmentos de código personalizados en nuestra cartera de sitios web. Es una forma confiable para que agreguemos funcionalidad y hagamos ajustes de forma segura sin editar directamente el archivo functions.php de un tema.

Lo primero que debes 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.

Tras la activación, dirígete a Snippets de código » Añadir Snippet.

Aquí, verá todos los fragmentos de WPCode listos para usar que puede agregar a su sitio. Estos incluyen un fragmento que le permite deshabilitar completamente los comentarios, cargar tipos de archivo que WordPress normalmente no admite, deshabilitar páginas de adjuntos, y mucho más.

Simplemente pase el mouse sobre ‘Agregar su código personalizado’ y luego haga clic en ‘+ Agregar fragmento personalizado’ cuando aparezca.

Para agregar CSS personalizado a WordPress, necesita seleccionar ‘Fragmento CSS’ como el tipo de código de la lista de opciones que aparecen en la pantalla.

Luego, en la siguiente página, escriba un título para el fragmento de código personalizado.

Esto puede ser cualquier cosa que le ayude a identificar el fragmento en el panel de WordPress.

En el editor de código, agrega 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 hará que cada imagen se desvanezca durante 2 segundos cuando el usuario pase el mouse sobre ella. Para que la imagen se desvanezca más lentamente, simplemente reemplace ‘2s ease’ con un número mayor. Si desea que la imagen se desvanezca más rápido, use ‘1s ease’ o un valor menor.

También puede hacer que la ‘opacidad’ sea mayor o menor cambiando la línea opacity:0.6.

Si cambia alguno de estos números, asegúrese 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é satisfecho con el fragmento, desplácese hasta la sección ‘Inserción’. WPCode puede agregar su código a diferentes ubicaciones, como después de cada publicación, solo en el frontend o solo en el administrador.

Para agregar un efecto de desvanecimiento a todas tus imágenes, haz clic en ‘Insertar automáticamente’ si aún no está seleccionado. Luego, abre el menú desplegable ‘Ubicación’ y elige ‘Encabezado de todo el sitio’.

Después de eso, estás listo para desplazarte hasta la parte superior de la pantalla y hacer clic en el interruptor ‘Inactivo’ para que cambie a ‘Activo’.

Finalmente, haz clic en 'Guardar fragmento' para que el fragmento CSS se active.

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

Método 2: Añadir animaciones de desvanecimiento de imagen a páginas individuales

Usar un efecto de desvanecimiento para cada imagen puede resultar molesto, especialmente si tienes una galería de fotos en tu sitio web, una tienda de fotos de stock, o cualquier otro sitio que tenga muchas imágenes.

Teniendo esto en cuenta, es posible que desees usar efectos de desvanecimiento solo en una página o publicación específica.

La buena noticia es que WPCode te permite crear códigos cortos personalizados. Puedes colocar este código corto en cualquier página, y WordPress mostrará efectos de desvanecimiento solo en esa página.

Para hacer esto, simplemente crea un fragmento de código personalizado y agrega el código de animación de desvanecimiento siguiendo el mismo proceso descrito anteriormente. Luego, haz clic en el botón ‘Guardar fragmento’.

Después de eso, desplázate hasta la sección ‘Inserción’, pero esta vez selecciona ‘Código corto’.

Esto crea un código corto que puedes agregar a cualquier página, publicación o área lista para widgets.

Después de eso, procede a activar el fragmento siguiendo el mismo proceso descrito anteriormente.

Ahora puedes ir a cualquier página, publicación o área lista para widgets y crear un nuevo bloque de ‘Código corto’. Luego, simplemente pega el código corto de WPCode en ese bloque.

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

Con eso hecho, haz clic en el botón ‘Actualizar’ o ‘Publicar’ para activar el código corto. Luego puedes visitar esa página, publicación o área lista para widgets para ver el efecto de desvanecimiento al pasar el mouse.

Método 3: Agregar animaciones de desvanecimiento de imágenes a imágenes destacadas

Otra opción es agregar animaciones de desvanecimiento a tus imágenes destacadas o miniaturas de publicaciones. Estas son las imágenes principales de la publicación.

Al desvanecer las imágenes destacadas al pasar el mouse, puedes hacer que tu sitio sea más llamativo y atractivo sin animar cada imagen de tu blog de WordPress o sitio web.

Para agregar una animación de desvanecimiento a las miniaturas de tus publicaciones, simplemente crea un nuevo fragmento de código personalizado siguiendo el mismo proceso descrito anteriormente.

Sin embargo, esta vez, agrega 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;
}

Después de eso, desplázate hasta el cuadro de 'Inserción' y selecciona 'Insertar automáticamente'.

Luego, abre el menú desplegable ‘Ubicación’ y elige ‘Encabezado de todo el sitio’.

Después de eso, puedes proceder a activar el fragmento de código utilizando el mismo proceso descrito anteriormente.

Ahora, puedes pasar el mouse sobre cualquier imagen destacada para ver la animación de desvanecimiento en acción.

Si deseas agregar aún más efectos de mouseover en imágenes, consulta nuestra guía sobre cómo agregar efectos de mouseover en imágenes en WordPress.

Preguntas frecuentes (FAQs)

Aquí encontrarás respuestas a algunas de las preguntas más comunes que recibimos sobre cómo agregar efectos de mouseover en imágenes en WordPress.

¿Agregar un efecto de desvanecimiento ralentizará mi sitio web?

No, este efecto de desvanecimiento basado en CSS no debería ralentizar notablemente tu sitio web. El código utiliza transiciones CSS simples, que son muy ligeras y optimizadas por los navegadores web modernos.

Este método es mucho más eficiente que usar JavaScript o grandes bibliotecas de animación para un efecto tan simple.

¿Cómo aplico el efecto de desvanecimiento a una sola imagen específica?

Para apuntar a una sola imagen, puedes asignarle una clase CSS personalizada. Primero, selecciona el bloque de imagen en el editor y busca el panel 'Avanzado' en la configuración del bloque a la derecha.

En el campo 'Clases CSS adicionales', agrega un nombre único como custom-fade-image. Luego, modifica tu fragmento de WPCode para apuntar específicamente a esta clase, de la siguiente manera:
img.custom-fade-image:hover { ... }.

¿El efecto de desvanecimiento de imagen al pasar el mouse funciona en dispositivos móviles?

La acción de 'pasar el mouse' o 'hover' es específica para usuarios de escritorio con un cursor de mouse. Este efecto no se activará en dispositivos táctiles como teléfonos inteligentes o tabletas porque no hay un cursor para pasar sobre las imágenes.

Sin embargo, el código no causará ningún problema en dispositivos móviles. Tus imágenes simplemente se mostrarán normalmente sin la animación de desvanecimiento.

¿Puedo usar otros efectos de animación además del desvanecimiento?

Sí, absolutamente. El desvanecimiento es solo una de las muchas posibilidades que puedes lograr con CSS.

Puedes crear efectos como zoom, deslizamiento, escala de grises o aplicar superposiciones. Para más ideas y ejemplos de código, consulta nuestra guía detallada sobre cómo agregar efectos de desplazamiento de imagen en WordPress.

Recursos adicionales para efectos y gestión de imágenes

Un simple desvanecimiento es un buen comienzo, pero hay muchas otras formas de hacer que tus imágenes sean más atractivas. Si deseas explorar opciones más avanzadas, aquí tienes algunas de nuestras otras guías sobre efectos y gestión de imágenes:

• Cómo agregar filtros de fotos al estilo de Instagram en WordPress (paso a paso)
• Cómo mostrar fotos de antes y después en WordPress (con efecto de deslizamiento)
• Cómo agregar que no se pueda hacer clic derecho en imágenes de WordPress
• Cómo crear imágenes interactivas en WordPress
• Cómo agregar fácilmente imágenes interactivas de 360 grados en WordPress

Esperamos que este artículo te haya ayudado a aprender cómo desvanecer imágenes al pasar el mouse en WordPress. También te puede interesar nuestra guía sobre cómo organizar archivos de WordPress en carpetas de la biblioteca de medios y nuestras selecciones expertas de los mejores plugins y herramientas de imágenes destacadas para WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.