M谩s

    C贸mo desvanecer im谩genes al pasar el mouse en WordPress (simple y f谩cil)

    - Advertisement -

    驴Quieres desvanecer las im谩genes al pasar el mouse por encima en WordPress?

    Una simple animaci贸n de aparici贸n o desaparici贸n gradual cuando un usuario mueve el mouse sobre una imagen puede hacer que su sitio sea m谩s atractivo. Tambi茅n alienta a los visitantes a interactuar con su contenido, lo que puede mantenerlos en su sitio por m谩s tiempo.

    En este art铆culo, le mostraremos c贸mo agregar un efecto de imagen de desvanecimiento al pasar el mouse sobre WordPress.

    驴Por qu茅 se desvanecen las im谩genes al pasar el mouse en WordPress?

    Las animaciones son una manera f谩cil de hacer que su sitio web sea m谩s interesante e incluso pueden llamar la atenci贸n del visitante hacia el contenido m谩s importante de su p谩gina, como el logotipo de su sitio web o un llamado a la acci贸n.

    Hay muchas formas diferentes de usar animaciones CSS en WordPress, pero agregar un efecto de desplazamiento a las im谩genes es particularmente efectivo. La animaci贸n de desvanecimiento significa que sus im谩genes aparecer谩n o desaparecer谩n lentamente cuando los visitantes se desplacen sobre ellas.

    Agregar una animaci贸n de desvanecimiento a WordPress

    Esto alienta a las personas a interactuar con sus im谩genes e incluso puede agregar un elemento narrativo a la p谩gina. Por ejemplo, diferentes im谩genes pueden aparecer y desaparecer gradualmente a medida que el visitante se mueve por la p谩gina.

    A diferencia de otras animaciones, el efecto de desvanecimiento de la imagen al pasar el mouse es sutil, por lo que no afectar谩 negativamente la experiencia de lectura del visitante ni ninguna optimizaci贸n de imagen que haya realizado.

    Dicho esto, le mostraremos c贸mo agregar un desvanecimiento a sus im谩genes al pasar el mouse sobre WordPress.

    Agregando Image Fade on Mouseover a todas las im谩genes de WordPress

    La forma m谩s f谩cil de agregar un efecto de desvanecimiento a todas sus im谩genes es usando C贸digo WP. Este complemento gratuito le permite agregar f谩cilmente c贸digo personalizado en WordPress sin tener que editar los archivos de su tema.

    Con WPCode, incluso los principiantes pueden editar el c贸digo de su sitio web sin correr el riesgo de errores y errores tipogr谩ficos que pueden causar muchos errores comunes de WordPress.

    Lo primero que debe hacer es instalar y activar el Complemento WPCode gratuito. Para obtener m谩s detalles, consulte nuestra gu铆a paso a paso sobre c贸mo instalar un complemento de WordPress.

    Tras la activaci贸n, dir铆gete a Fragmentos de c贸digo 禄 A帽adir fragmento.

    Agregar c贸digo personalizado a su sitio web de WordPress con WPCode

    Aqu铆, simplemente pase el mouse sobre ‘Agregar su c贸digo personalizado’.

    Cuando aparezca, haz clic en ‘Usar fragmento’.

    Creaci贸n de un fragmento de CSS personalizado en su sitio web de WordPress

    Para comenzar, escriba un t铆tulo para el fragmento de c贸digo personalizado. Esto puede ser cualquier cosa que lo ayude a identificar el fragmento en el tablero de WordPress.

    Necesitamos agregar CSS personalizado a WordPress, as铆 que abra el men煤 desplegable ‘Tipo de c贸digo’ y seleccione ‘Fragmento de CSS’.

    Agregue una animaci贸n de desvanecimiento al pasar el mouse a las im谩genes usando WPCode

    En el editor de c贸digo, agregue el siguiente fragmento de c贸digo:

    鉂 Tambi茅n te interesa:馃摲 Como proteger con contrasena su directorio de administracion de WordPressC贸mo proteger con contrase帽a su directorio de administraci贸n de WordPress (wp-admin)
    .post 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 mouse sobre ella. Para hacer que la imagen se desvanezca m谩s lentamente, simplemente reemplace ‘2 s de facilidad’ con un n煤mero m谩s alto. Si desea que la imagen se desvanezca m谩s r谩pido, utilice ‘1s easy’ o menor.

    Tambi茅n puede hacer que la ‘opacidad’ sea m谩s alta o m谩s baja cambiando el opacity:0.6 l铆nea.

    Si cambia cualquiera de estos n煤meros, aseg煤rese de cambiarlos en todas las propiedades (webkit, moz, ms y o), para que el efecto de atenuaci贸n 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 la interfaz o solo en el administrador.

    Para agregar un efecto de desvanecimiento a todas sus im谩genes, haga clic en ‘Inserci贸n autom谩tica’. Luego, abra el men煤 desplegable 芦Ubicaci贸n禄 y elija 芦Encabezado de todo el sitio禄.

    Insertar CSS personalizado en su sitio web de WordPress

    Despu茅s de eso, estar谩 listo para desplazarse hasta la parte superior de la pantalla y hacer clic en el interruptor ‘Inactivo’, para que cambie a ‘Activo’.

    Finalmente, haga clic en ‘Guardar fragmento’ para hacer que el fragmento CSS est茅 activo.

    Agregar un efecto de desvanecimiento a las im谩genes usando CSS

    Ahora, si pasa el mouse sobre cualquier imagen en su sitio web de WordPress, ver谩 el efecto de desvanecimiento en acci贸n.

    Adici贸n de animaciones de fundido de imagen a p谩ginas individuales

    El uso de un efecto de desvanecimiento para cada imagen puede distraer, especialmente si est谩 ejecutando un sitio web de fotograf铆a, una tienda de fotos de archivo o cualquier otro sitio que tenga muchas im谩genes.

    Con eso en mente, es posible que desee utilizar efectos de desvanecimiento solo en una p谩gina o publicaci贸n espec铆fica.

    La buena noticia es que WPCode le permite crear c贸digos abreviados personalizados. Puede colocar este c贸digo abreviado en cualquier p谩gina y WordPress mostrar谩 efectos de desvanecimiento solo en esa p谩gina.

    Para hacer esto, simplemente cree un fragmento de c贸digo personalizado y agregue el c贸digo de animaci贸n de desvanecimiento siguiendo el mismo proceso descrito anteriormente. Luego, haga clic en el bot贸n ‘Guardar fragmento’.

    Desvanecer im谩genes al pasar el mouse en WordPress usando un c贸digo personalizado

    Despu茅s de eso, despl谩cese a la secci贸n ‘Inserci贸n’, pero esta vez seleccione ‘C贸digo corto’.

    Esto crea un c贸digo abreviado que puede agregar a cualquier p谩gina, publicaci贸n o 谩rea lista para widgets.

    Creando un shortcode en WPCode

    Despu茅s de eso, contin煤e y publique el fragmento siguiendo el mismo proceso descrito anteriormente.

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

    C贸mo crear animaciones de fundido para im谩genes usando shortcode

    Para obtener m谩s informaci贸n sobre c贸mo colocar el c贸digo abreviado, consulte nuestra gu铆a sobre c贸mo agregar un c贸digo abreviado en WordPress.

    鉂 Tambi茅n te interesa:馃摲 Como usar fuentes de iconos en el editor de publicacionesC贸mo usar fuentes de iconos en el editor de publicaciones de WordPress (sin c贸digo)

    Una vez hecho esto, haga clic en el bot贸n ‘Actualizar’ o ‘Publicar’ para que el shortcode est茅 activo. Luego puede visitar esa p谩gina, p谩gina o 谩rea lista para widgets para ver el efecto de desvanecimiento al pasar el mouse.

    Adici贸n de animaciones de fundido de imagen a Im谩genes destacadas

    Otra opci贸n es agregar animaciones de desvanecimiento a sus im谩genes destacadas o publicar miniaturas. Estas son la imagen principal de la publicaci贸n y, a menudo, aparecen junto al encabezado de su p谩gina de inicio, p谩ginas de archivo y otras 谩reas importantes de su sitio web.

    Al atenuar las im谩genes destacadas al pasar el mouse, puede hacer que su sitio sea m谩s llamativo y atractivo, sin animar cada imagen en su blog o sitio web de WordPress.

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

    Adici贸n de un efecto de desvanecimiento al pasar el mouse por encima de las im谩genes individuales

    Sin embargo, esta vez agregue 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谩cese hasta el cuadro ‘Inserci贸n’ y seleccione ‘Inserci贸n autom谩tica’. Luego, abra el men煤 desplegable 芦Ubicaci贸n禄 y elija 芦Encabezado de todo el sitio禄.

    Agregar una animaci贸n a las im谩genes al pasar el mouse

    Despu茅s de eso, puede continuar y hacer que el fragmento de c贸digo se active utilizando el mismo proceso descrito anteriormente.

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

    Si desea agregar a煤n m谩s efectos de desplazamiento de imagen, consulte nuestra gu铆a sobre c贸mo agregar efectos de desplazamiento de imagen en WordPress.

    Bonificaci贸n: Anima cualquier imagen, texto, bot贸n y m谩s

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

    Si quieres probar diferentes efectos, entonces Producto de semilla tiene m谩s de 40 animaciones que puedes agregar a im谩genes, texto, botones, videos y m谩s. Incluso puede animar secciones y columnas enteras con solo unos pocos clics.

    Dentro del editor de SeedProd, simplemente haga clic en el contenido que desea animar y luego seleccione la pesta帽a ‘Avanzado’ en el men煤 de la izquierda.

    Agregar animaciones de fundido usando SeedProd

    Luego puede continuar y hacer clic para expandir la secci贸n ‘Efectos de animaci贸n’.

    Despu茅s de eso, simplemente elija una animaci贸n del men煤 desplegable ‘Animaci贸n de entrada’, que incluye una amplia gama de diferentes efectos de desvanecimiento.

    Agregar animaciones a WordPress usando SeedProd

    Para obtener m谩s informaci贸n, consulte nuestra gu铆a sobre c贸mo crear una p谩gina de destino con WordPress.

    Esperamos que este art铆culo le haya ayudado a aprender a desvanecer im谩genes al pasar el mouse por encima en WordPress. Tambi茅n puede consultar nuestra gu铆a sobre c贸mo elegir el mejor software de dise帽o web y nuestra selecci贸n de expertos de los mejores complementos emergentes de WordPress.

    Fuente: C贸mo desvanecer im谩genes al pasar el mouse en WordPress (simple y f谩cil)

    鉂 Tambi茅n te interesa:馃摲 Como personalizar el color de fondo del editor de bloquesC贸mo personalizar el color de fondo del editor de bloques de WordPress

    Populares

    M谩s de esta categor铆a

    DEJA UNA RESPUESTA

    Por favor ingrese su comentario!
    Por favor ingrese su nombre aqu铆

    Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.