Conclusiones clave
- Los efectos de desplazamiento de imagen CSS en Elementor siguen dos pasos: agregue un nombre de clase al widget Imagen en Avanzado, Clases CSS, luego pegue una regla CSS que se dirija a esa clase.
- Los cinco efectos de desplazamiento de imagen CSS en esta guía son un zoom dentro del marco, escala de grises a color, un levantamiento con una sombra, una superposición oscura y un título que se desliza hacia arriba.
- Elementor Pro tiene un cuadro CSS personalizado en la pestaña Avanzado de cada widget, y sin Pro, el mismo CSS puede ir en Apariencia, Personalizar y CSS adicional.
- El widget Image de Elementor imprime su título como un título de figura dentro de una figura, que es lo que hace posible un título deslizante solo con CSS.
- Los cambios de escala de grises a color y opacidad no necesitan CSS en Elementor, porque la pestaña Estilo del widget Imagen ya tiene filtros CSS y opacidad en una pestaña Flover.
Los efectos de desplazamiento de imagen CSS funcionan en Elementor de la misma manera que funcionan en cualquier lugar: una clase en el elemento y una regla con :hover. Las únicas partes específicas de Elementor son donde escribe la clase y donde pega el CSS. A continuación se muestran cinco efectos que puede copiar, cada uno probado en Elementor 4.3 con el widget Image estándar.
Si prefiere no tocar el código, la última sección muestra la ruta sin código con Widget de efectos de desplazamiento de imagen.
Tabla de contenidos
Cómo funcionan los efectos de desplazamiento de CSS en Elementor
Cada fragmento a continuación sigue el mismo patrón. Le das una clase al widget Imagen y el CSS cambia la imagen dentro de ese widget cuando el puntero lo supera.
- Seleccione el widget de imagen en Elementor.
- Abre el Avanzado pestaña y buscar Clases CSS.
- Escriba el nombre de la clase sin un punto, por ejemplo
hover-zoom. - Agregue el CSS correspondiente a su sitio una vez. Cualquier imagen con esa clase obtiene el efecto.
La clase aterriza en el elemento exterior del widget y la imagen es una img dentro de él, las reglas apuntan .hover-zoom img.
Dónde agregar el CSS
Tienes cuatro lugares para pegar CSS, dependiendo de lo que esté instalado.
| Lugar | Necesidades | Aplica para |
|---|---|---|
| Widget, CSS avanzado y personalizado | Elemento Pro | Ese widget |
| Configuración del sitio, CSS personalizado | Elemento Pro | Todo el sitio |
| Apariencia, Personalización, CSS adicional | Sólo WordPress | Todo el sitio |
| Extensión CSS personalizada | Complementos maestros | El elemento al que lo agregas |
Para las clases que planea reutilizar, un lugar en todo el sitio es el mejor hogar. El Extensión CSS personalizada page explica cómo funciona la opción Master Addons.
5 efectos de desplazamiento de imagen CSS para copiar
Cada efecto tiene un nombre de clase, el CSS y una captura de pantalla del resultado antes y durante el vuelo estacionario.
1. Haga zoom dentro del marco
La imagen aumenta mientras su cuadro permanece del mismo tamaño. Nombre de la clase: hover-zoom.
.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); }
2. Escala de grises al color
La imagen se encuentra en blanco y negro y se vuelve a todo color al flotar. Nombre de la clase: hover-color.
.hover-color img { filter: grayscale(100%); transition: filter 0.4s ease; }
.hover-color:hover img { filter: none; }
3. Levanta con una sombra
La imagen sube unos pocos píxeles y gana una sombra suave, como si se recogiera una tarjeta. Nombre de la clase: hover-lift.
.hover-lift img { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover img { transform: translateY(-6px); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.18); }
4. Superposición oscura
Una capa oscura se desvanece sobre la imagen. Está construido con un pseudoelemento, por lo que no se necesita marcado adicional. Nombre de la clase: hover-dim.
.hover-dim { position: relative; }
.hover-dim::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.hover-dim:hover::after { opacity: 1; }
5. Título que se desliza hacia arriba
El título de la imagen se esconde debajo del borde inferior y se desliza hacia arriba al pasar el cursor. En el widget Imagen, establezca Subtítulo para personalizar el título y escribir el texto primero. Nombre de la clase: hover-caption.
.hover-caption figure { position: relative; overflow: hidden; margin: 0; }
.hover-caption figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 14px 18px; background: rgba(0, 0, 0, 0.6); color: #fff; transform: translateY(100%); transition: transform 0.35s ease; }
.hover-caption:hover figcaption { transform: translateY(0); }
Éste depende de que el título esté ahí. Sin un título, Elementor no imprime la figura y el título de figura, y la regla no tiene nada que moverse.
¿CSS o la configuración de desplazamiento incorporada?
Verifique los controles propios de Elementor antes de escribir CSS, porque dos de estos cinco efectos existen como configuración. La pestaña Estilo del widget de imagen tiene una pestaña Flover con Opacity, filtros CSS y animación Hover.
| Efecto | ¿integrado en Elementor? | ¿por qué utilizar CSS |
|---|---|---|
| Escala de grises al color | Sí, filtros CSS, saturación | Una clase para muchas imágenes |
| Zoom | Parcialmente. El crecimiento se agranda más allá del marco. | Para mantener el zoom dentro del marco |
| Levanta con sombra | prohibido | Elementor no tiene configuración para ello |
| Superposición oscura | No, en el widget de imagen | Necesario a menos que envuelva la imagen en un contenedor |
| Título deslizante | prohibido | Necesario a menos que utilices un widget flotante |
Los ajustes integrados se cubren paso a paso cómo agregar efectos de desplazamiento de imágenes en Elementor. La técnica general está documentada en Página de MDN para la pseudoclase :hover.
La ruta sin código
CSS se adapta a efectos simples de la imagen en sí. Una vez que desea un título y una descripción que se animen sobre la imagen, el CSS crece rápidamente y debe mantenerlo en cada cambio de diseño.
El widget Image Hover Effects en Master Addons lo reemplaza con un menú desplegable. Tiene 30 efectos, un título y una descripción para cada imagen, y controles de pestaña Estilo para colores y tipos.
Véalos en vivo. El Página de widget de efectos de desplazamiento de imagen tiene ocho cartas para pasar el cursor y una tabla de los 30 efectos.
Preguntas frecuentes
¿cómo agrego efectos de desplazamiento CSS a una imagen en Elementor?
Seleccione el widget Imagen, abra la pestaña Avanzado y escriba el nombre de una clase en Clases CSS. Luego agregue una regla CSS para esa clase con :hover, por ejemplo .hover-zoom:hover img {transformar: escala (1.08); }. Pegue el CSS en el CSS personalizado de Elementor Pro o en Apariencia, Personalizar, CSS adicional.
¿dónde pongo CSS personalizado en Elementor sin Pro?
Vaya a Apariencia, Personalizar, CSS adicional en el panel de WordPress y péguelo allí. El CSS se carga en cada página, por lo que cualquier widget con la clase correspondiente lo recoge. Otra opción es una extensión CSS personalizada de un complemento.
¿por qué mi efecto flotante CSS no funciona en Elementor?
Las causas habituales son un punto escrito en el campo Clases CSS, un nombre de clase que no coincide con el CSS o una hoja de estilo almacenada en caché. Escriba la clase sin un punto, compare la ortografía y luego borre su complemento de caché y los archivos de Elementor en Herramientas.
¿puedo hacer que una imagen se acerque sin que se desborde?
Sí. Establezca el desbordamiento en oculto en el widget que lleva la clase y escale el img dentro de él. El widget mantiene su tamaño y recorta la imagen ampliada. El primer fragmento de esta guía hace esto.
¿funcionan los efectos de desplazamiento CSS en dispositivos móviles?
Los teléfonos no tienen estado de vuelo estacionario, por lo que el efecto nunca se muestra o se muestra después de un toque y permanece hasta que el visitante toca en otro lugar. Trate los efectos de vuelo estacionario como decoración en pantallas pequeñas y mantenga visible cualquier texto importante sin ellos.
Pensamientos finales
Los efectos de desplazamiento de imagen CSS en Elementor necesitan una clase en el widget Image y una regla breve. Los cinco aquí cubren zoom, color, elevación, superposición y un título deslizante, y cada uno se puede ajustar cambiando uno o dos valores.
Cuando el efecto que deseas incluye texto sobre la imagen, el Widget de efectos de desplazamiento de imagen te lleva allí sin mantener CSS.
Lectura relacionada
