Los efectos al pasar el cursor son una interacción esencial para los elementos enlazados. Añadir este efecto no solo hace que el diseño de tu sitio sea más divertido, sino que también ayuda al usuario a identificar qué elementos son interactivos y cuáles no.
En esta sencilla demostración, te mostraré paso a paso cómo crear un efecto de zoom al pasar el cursor. Una vez que domines estos fundamentos, te animo a ir más allá y crear algo aún más creativo.
Paso 1: Selecciona el elemento y añade un resplandor exterior
Selecciona tu imagen (o el elemento que prefieras) y baja hasta la sección Sombras en la pestaña Estilo. En mi ejemplo, configuré el resplandor exterior en negro con una opacidad del 50% y un desenfoque de 10px para darle profundidad al elemento.
Aunque no es necesario para el efecto de zoom, haremos que la interacción afecte a esta sombra para darle un toque más dramático más adelante.
Paso 2: Reduce la escala del elemento
Luego, baja a la sección Transformaciones de la pestaña Estilo. Haz clic en el signo más para añadir una nueva transformación, ve a la pestaña de escala y ajusta los ejes X e Y a 0.95.
Hacer esto en el estado predeterminado de la imagen nos permitirá volver a una escala de 1 al pasar el cursor, creando así el efecto de zoom.
(Opcional) Efecto extra: Configura un filtro de escala de grises
Baja hasta la sección Efectos de la pestaña Estilo. En la sección de filtros, haz clic en el botón más para añadir uno nuevo y selecciona "escala de grises". Esto dejará la imagen en blanco y negro, y recuperaremos el color al pasar el cursor.
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
Paso 3: Añade transiciones para cada propiedad
Ahora vuelve a subir en la pestaña Estilo hasta llegar a la sección Transiciones y transformaciones. Añade un temporizador de transición para cada propiedad que acabas de configurar:
- Transformación (para la reducción de escala)
- Filtro (para el filtro de escala de grises)
- Sombra de caja (para el resplandor exterior)
Esto ajustará la sincronización para que cada transición se sienta fluida y sin interrupciones.
Paso 4: Configura tus estilos de hover
En la parte superior derecha de la pestaña Estilos, encontrarás un menú desplegable de Estados. Ábrelo y haz clic en hover.
Luego, oculta tus estilos de escala y escala de grises haciendo clic en el icono del ojo junto a cada uno.
Y finalmente, ajusta el desenfoque del resplandor exterior a 50px para darle más profundidad al elemento. ¡Eso es todo!
Paso 5: Previsualiza tu trabajo y disfruta
Haz clic en el botón de vista previa en la parte superior izquierda del Diseñador y pasa el cursor sobre la imagen para ver tu trabajo.
