Conclusiones clave
- Elementor no tiene una configuración única para cambiar una imagen en el modo estacionario, por lo que el intercambio se realiza con un fondo de contenedor detrás de la imagen o con un widget que acepta una segunda imagen.
- La forma sin complemento de cambiar una imagen en el modo flotante en Elementor es configurar la segunda imagen como fondo del contenedor y configurar la opacidad del modo estacionario del widget Image en 0.
- El widget Master Addons Advanced Image intercambia imágenes con un interruptor, Display Hover Image, que se encuentra en la sección Hover Image de la pestaña Contenido.
- El ajuste preestablecido de animación flotante de Elementor, Grow, hace zoom en una imagen al 110 por ciento al pasar el cursor y la imagen crece más allá de sus bordes originales.
- Un zoom en el desplazamiento que permanece dentro de su marco necesita una clase CSS en el widget Imagen y tres reglas CSS cortas que escalen la imagen dentro de un desbordamiento oculto.
Para cambiar una imagen al pasar el cursor en Elementor, colocas una segunda imagen detrás o dentro de la primera y la revelas cuando llega el puntero. Elementor puede hacer esto sin un complemento a través de un fondo contenedor, y un widget de imagen flotante lo hace con un solo interruptor. Al hacer zoom en el hover se necesita un ajuste preestablecido para un zoom básico, o algunas líneas de CSS para un zoom que permanece en su marco.
Los cuatro métodos siguientes se construyeron y probaron en Elementor 4.3.
Tabla de contenidos
Qué método utilizar
Dos de estos métodos intercambian la imagen y dos la amplían. Dentro de cada par, uno usa solo Elementor y el otro es más rápido o más ordenado.
| Gol | Método | Necesidades | Código |
|---|---|---|---|
| Cambiar a una segunda imagen | Fondo del contenedor más opacidad de flotación | elemento | Ninguno |
| Cambiar a una segunda imagen | Widget de imagen avanzada | Complementos maestros | Ninguno |
| Amplíe la imagen | Animación flotante: crecer | elemento | Ninguno |
| Haga zoom dentro de un marco fijo | Clase CSS en el widget Imagen | Elementor y un lugar para agregar CSS | Tres reglas |
Cambie una imagen al pasar el cursor con un fondo de contenedor
Este método no necesita complemento. La segunda imagen es el fondo de un contenedor y la primera imagen se encuentra encima como un widget de imagen normal. Al pasar el cursor, la imagen superior se desvanece y el fondo se muestra.
- Agregue un contenedor y ajuste su relleno a 0.
- En el contenedor Estilo pestaña, abierta Antecedentes, elige Clásico y sube la imagen que debería aparecer al pasar el cursor. Establezca la posición en el centro del centro y el tamaño a cubrir.
- Arrastra un Imagen ingrese el widget en el contenedor y elija la imagen que debería mostrarse primero.
- Seleccione el widget Imagen, ábralo Estilo y cambia al Flotar pestaña.
- Conjunto Opacidad a 0 y Duración de la transición hasta aproximadamente 0,4.
Utilice dos imágenes con las mismas proporciones. El contenedor toma su altura del widget Imagen, por lo que se recorta un fondo con una forma diferente.
Cambie una imagen en el modo flotante con un widget de imagen flotante
Un widget con un campo de imagen flotante realiza el mismo intercambio desde un panel. Los pasos a continuación utilizan el Widget de imagen avanzada de complementos maestros.
- Busque en el panel de widgets Imagen avanzada y arrástrelo a la página.
- En el Imagen sección, elige la imagen principal.
- Abre el Imagen flotante sección y encender Mostrar imagen flotante.
- Elija la segunda imagen en el campo que aparece.
- Obtenga una vista previa de la página y pase el cursor.
El widget también tiene una cinta, un enlace y una caja de luz, que se adapta a las fotos del producto: vista frontal primero, vista posterior al pasar el cursor, con una nueva cinta en la esquina.
¿quieres texto sobre flotar? Efectos de desplazamiento de imagen anima un título y una descripción sobre una imagen, con 30 efectos para elegir.
Haga zoom en una imagen al pasar el cursor con el ajuste preestablecido de Crecimiento
El zoom más rápido es un ajuste preestablecido. Seleccione el widget Imagen, ábralo Estilo, cambia al Flotar pestaña y conjunto Animación flotante a Crecer. La imagen aumenta al 110 por ciento mientras el puntero está encima.
Grow funciona bien para una sola imagen con espacio a su alrededor. En una cuadrícula estrecha se superpone a las imágenes que tiene al lado, así que utilice el siguiente método allí.
Haga zoom con una imagen sobre el desplazamiento dentro de su marco
Para un zoom que permanece dentro del cuadro de la imagen, déle al widget Imagen una clase CSS y agregue tres reglas. El widget mantiene su tamaño y la imagen aumenta en su interior.
- Seleccione el widget Imagen y ábralo Avanzado. En Clases CSS, tipo
hover-zoom. - Agregue el CSS a continuación a su sitio.
.hover-zoom { overflow: hidden; border-radius: 10px; }
.hover-zoom img { transition: transform 0.4s ease; display: block; }
.hover-zoom:hover img { transform: scale(1.08); }
Dónde va el CSS depende de su configuración. Elementor Pro tiene un cuadro CSS personalizado en la pestaña Avanzado. Sin él, use Apariencia, Personalizar, CSS adicional en WordPress o Extensión CSS personalizada en complementos maestros. Cambie 1.08 a 1.15 para obtener un zoom más fuerte.
Cuatro cosas que salen mal
La mayoría de los problemas con estos efectos provienen del tamaño de las imágenes y de las pruebas en el dispositivo incorrecto.
- Las dos imágenes tienen proporciones diferentes. Luego, el intercambio salta o recorta. Exportar ambos al mismo ancho y alto.
- La imagen ampliada cubre contenido cercano. Grow no tiene marco. Utilice el método CSS cuando las imágenes se encuentren muy juntas.
- No pasa nada en un teléfono. Las pantallas táctiles no flotan. Asegúrese de que la primera imagen funcione sola, porque es posible que los visitantes del teléfono nunca vean la segunda.
- La imagen flotante es pesada. Comprima ambos archivos, porque una segunda imagen grande puede mostrarse como un flash en blanco en el primer vuelo estacionario.
Preguntas frecuentes
¿cómo cambio una imagen al pasar el cursor en Elementor sin un complemento?
Coloque la imagen flotante en un contenedor como fondo, luego coloque un widget de imagen con la primera imagen dentro de ese contenedor. En la pestaña Estilo del widget de imagen, abra la pestaña Flotar y establezca Opacidad en 0 con una duración de transición de aproximadamente 0,4 segundos.
¿Cómo hago zoom en una imagen en el mouse en Elementor?
Seleccione el widget Imagen, abra Estilo, vaya a la pestaña Flotar y configure Hover Animation en Grow. Para un zoom que permanezca dentro del marco de la imagen, agregue una clase CSS al widget y escale la imagen con transformación dentro de un contenedor que tiene el desbordamiento configurado en oculto.
¿puede el widget Image Hover Effects cambiar la imagen al pasar el cursor?
No. Image Hover Effects mantiene una imagen y anima un título y una descripción sobre ella. Para cambiar a una segunda imagen, use el widget Imagen avanzada y active Mostrar imagen flotante, o use el método de fondo del contenedor.
¿por qué mi imagen se superpone a otro contenido cuando se acerca?
La animación Grow escala toda la imagen más allá de su cuadro. Dale una clase al widget Imagen, establece el desbordamiento en oculto y escala el elemento img en su interior. Luego, el cuadro permanece del mismo tamaño y recorta el zoom.
¿puedo cambiar la imagen de un producto al pasar el cursor en WooCommerce con esto?
Estos métodos funcionan en imágenes que usted mismo coloca en Elementor. Las cuadrículas de productos generadas por WooCommerce o un widget de productos son un caso diferente y dependen del tema o del widget que las imprime.
Pensamientos finales
Para cambiar una imagen al pasar el cursor en Elementor, use un fondo de contenedor con un widget de imagen que se desvanece o un widget con un campo de imagen flotante. Para hacer zoom, use Crecer para obtener un resultado rápido y la clase CSS cuando la imagen debe permanecer en su marco.
El Widget de imagen avanzada maneja el intercambio en un panel y Efectos de desplazamiento de imagen cubre superposiciones de texto.
Lectura relacionada
