Conclusiones clave
- Los efectos de desplazamiento de Elementor para imágenes se encuentran en la pestaña Estilo del widget de imagen, debajo de una pestaña de desplazamiento con cuatro controles: Opacidad, Filtros CSS, Duración de transición y Animación de desplazamiento.
- Un efecto de desplazamiento en escala de grises a color en Elementor no necesita código: establezca Saturación en 0 en Filtros CSS en la pestaña Normal y vuelva a 100 en la pestaña Flotar.
- Los ajustes preestablecidos de animación flotante de Elementor, como Grow, mueven la imagen completa y el ajuste preestablecido de Grow escala una imagen al 110 por ciento de su tamaño en el vuelo estacionario.
- El widget Image de Elementor no puede mostrar un título o descripción sobre la imagen en el hover, por lo que las superposiciones de texto necesitan una solución alternativa al contenedor, un CSS personalizado o un widget complementario.
- El widget Master Addons Image Hover Effects tiene 30 efectos flotantes con nombre que animan un título y una descripción sobre la imagen, elegidos en un menú desplegable Hover Effect.
Puede agregar efectos de desplazamiento de Elementor a una imagen de tres maneras. El widget Imagen tiene opacidad y configuraciones de filtro CSS para el estado de desplazamiento. También tiene ajustes preestablecidos de animación flotante que mueven la imagen. Para obtener un título y una descripción que aparezcan sobre la imagen, necesita crear un widget, como por ejemplo Efectos de desplazamiento de imagen.
Esta guía cubre cada ruta con la configuración exacta, probada en Elementor 4.3. Comience con los dos primeros si solo desea que la imagen reaccione y salte al tercero si desea texto en la imagen.
Tabla de contenidos
Donde las configuraciones de desplazamiento están en Elementor
Seleccione un widget de imagen, abra el Estilo tabular y mirar debajo de la sección Imagen. Debajo de los controles de tamaño hay dos pestañas, Normal y Hover. Todo en la pestaña Hover se aplica solo mientras el puntero está sobre la imagen. Elementor explica la idea en su introducción a los efectos flotantes.
| Control | Lo que hace al flotar |
|---|---|
| Opacidad | Desvanece la imagen hacia adentro o hacia afuera, de 0 a 1 |
| Filtros CSS | Cambia el desenfoque, el brillo, el contraste, la saturación y el tono |
| Duración de la transición | Establece cuánto tiempo tarda el cambio, en segundos |
| Animación flotante | Reproduce un movimiento preestablecido como Grow |
Forma 1: Filtros de opacidad y CSS
Utilice opacidad y filtros CSS cuando la imagen en sí debería cambiar al pasar el cursor. El ejemplo clásico es una foto que se coloca en blanco y negro y se vuelve de color cuando llega el puntero.
- Seleccione el widget Imagen y ábralo Estilo.
- En el normalidad tab, haz clic en el lápiz al lado Filtros CSS y arrastrar Saturación a 0. La imagen se vuelve gris.
- Cambiar al Flotar pestaña, abierta Filtros CSS nuevamente y establezca Saturación en 100.
- Conjunto Duración de la transición hasta aproximadamente 0,4 para que el color se desvanezca.
- Opcional: establezca Opacity en 0,85 en Normal y 1 en Hover para obtener un ligero brillo.
Las mismas dos pestañas le brindan un desenfoque que se aclara, una imagen tenue que se ilumina o un cambio de tono. Mantenga la transición entre 0,3 y 0,5 segundos. Más corto que eso parece un parpadeo y más largo se siente lento.
Way 2: ajustes preestablecidos de Hover Animation
Hover Animation mueve toda la imagen cuando el puntero la supera. Es un menú desplegable en la parte inferior de la pestaña Hover y no necesita ninguna otra configuración.
- Seleccione el widget Imagen y ábralo Estilo, atunci el Flotar pestaña.
- Abierto Animación flotante y elige un ajuste preestablecido. Crecer es el que la mayoría de la gente quiere.
- Obtenga una vista previa de la página y mueva el puntero sobre la imagen.
Grow amplía la imagen más allá de sus bordes originales, por lo que puede superponerse a sus vecinos en una cuadrícula estrecha. Si desea que la imagen se acerque dentro de un marco fijo, se necesitan algunas líneas de CSS.
Camino 3: Un widget para texto sobre la imagen
Utilice un widget dedicado cuando un título y una descripción aparezcan sobre la imagen en el hover. El widget Imagen de Elementor muestra su título debajo de la imagen y no tiene configuración para colocar texto encima.
Estos pasos utilizan el widget Image Hover Effects de Master Addons.
- Edite la página con Elementor, busque en el panel de widgets Efectos de desplazamiento de imagen y arrástrelo a la página.
- Bajo Efectos e imagen, sube la imagen.
- Abre el Efecto flotante desplegable y elige uno de los 30 efectos. Se enumeran por nombre, comenzando con Lily, Sadie, Roxy y Bubba.
- Escribe el Título y el Descripción en sus propias secciones.
- Conjunto ¿enlaces o ventana emergente? si un clic fuera a alguna parte.
- En la pestaña Estilo, establezca el color de la superposición, la opacidad de la imagen para normal y flotante, y la tipografía para cada capa de texto.
Pruebe los efectos antes de instalar algo. El Página de widget de efectos de desplazamiento de imagen tiene ocho cartas en vivo que puedes pasar el cursor, además de la lista completa de 30 efectos.
Ocho de los efectos funcionan sin una licencia Pro y 22 necesitan Master Addons Pro. Cada widget contiene una imagen, por lo que una cuadrícula de tarjetas flotantes consta de varios widgets uno al lado del otro.
Videotutorial
Este vídeo de cuatro minutos configura el widget Image Hover Effects desde una página vacía.
¿Qué forma debes utilizar?
Elija por qué debería cambiar al pasar el cursor: la imagen, su posición o el texto encima.
| Tu quieres | Usar | Necesidades |
|---|---|---|
| Escala de grises a color, de borroso a nítido, de tenue a brillante | Filtros CSS y opacidad en la pestaña Hover | elemento |
| La imagen para crecer o pulsar | Animación flotante | elemento |
| Un zoom que permanece dentro de su marco | Una clase CSS y algunas líneas de CSS | Elementor y algún lugar para agregar CSS |
| Un título y descripción sobre la imagen | Widget de efectos de desplazamiento de imagen | Complementos maestros |
| Una segunda imagen que reemplaza a la primera | Widget de imagen avanzada o fondo de contenedor | Complementos maestros o Elementor solo |
Para texto e imágenes combinados de otras maneras, consulte Texto elemental sobre imagen.
¿funcionan los efectos flotantes en los teléfonos?
No como flotar, porque una pantalla táctil no tiene un puntero con el que flotar. Los efectos de la pestaña Estilo de Elementor no se activan en un teléfono, lo que no daña un cambio de color.
Con el widget Image Hover Effects, el primer toque suele mostrar el texto y el segundo toque sigue el enlace. Si el texto es esencial, como un precio o un nombre, colóquelo también en algún lugar visible en pantallas pequeñas.
Preguntas frecuentes
¿cómo agrego un efecto flotante a una imagen en Elementor?
Seleccione el widget Imagen, abra la pestaña Estilo y cambie a la pestaña Flotar. Establezca filtros de opacidad o CSS para el estado de desplazamiento, o elija una animación flotante como Grow. Agregue una duración de transición de 0,3 a 0,5 segundos para que el cambio sea fluido.
¿elementor tiene efectos de desplazamiento de imagen sin un complemento?
Sí. El widget Image en Elementor tiene controles flotantes para opacidad, filtros CSS y un ajuste preestablecido de Hover Animation. Cambian o mueven la imagen. El texto sobre la imagen necesita un widget complementario o un CSS personalizado.
¿cómo hago que una imagen pase del blanco y negro al color al flotar en Elementor?
En la pestaña Estilo del widget Imagen, abra Filtros CSS en la pestaña Normal y establezca Saturación en 0. Luego abra Filtros CSS en la pestaña Flover y establezca Saturación en 100. Establezca la Duración de la transición en aproximadamente 0,4 segundos.
¿cómo muestro texto cuando floto sobre una imagen en Elementor?
Utilice un widget creado para ello. Con complementos maestros, agregue el widget Image Hover Effects, cargue la imagen, escriba un título y descripción y elija un efecto Hover. El texto permanece oculto hasta que el puntero esté sobre la imagen.
¿por qué mi efecto flotante Elementor no funciona?
Verifique que la configuración esté en la pestaña Flotar y no en la pestaña Normal, y que la duración de la transición sea superior a 0. En un teléfono o tableta no hay desplazamiento, así que pruebe con el mouse. Si usa CSS personalizado, confirme que el nombre de la clase en el widget coincida con el del código.
Pensamientos finales
Los efectos de desplazamiento de Elementor para imágenes vienen en tres tipos. La pestaña Estilo cambia el aspecto de la imagen, Hover Animation la mueve y una superposición de texto necesita un widget. Comience con los controles integrados, ya que no cuesta nada probarlos.
Cuando desee un título y una descripción en la imagen, el Widget de efectos de desplazamiento de imagen tiene 30 efectos listos para elegir y el página de precios muestra qué plan los incluye todos.
Lectura relacionada
