Recibimos muchísimas peticiones de tutoriales sobre superposiciones en miniaturas.
Probablemente porque es un patrón de diseño bastante popular y flexible, con todo tipo de aplicaciones. Al fin y al cabo, siempre buscamos formas de mostrar lo justo y necesario para que la gente pase a la acción sin abrumarla.
En este tutorial, te enseñaré a usar las interacciones de Webflow para mostrar texto sobre una imagen en miniatura al pasar el ratón, un método muy usado en diseños de blogs.
Mientras trabajas, puedes consultar mi diseño de superposición de imagen.
Cómo mostrar texto al pasar el ratón (usando interacciones de Webflow)
Paso 1: Vamos a crear nuestro bloque de miniatura
Para empezar, voy a arrastrar un bloque div a un diseño de 3 columnas. Le asignaré una clase (llamada "Thumbnail Block") y añadiré estos estilos:
Nombre de la clase: Thumbnail Block
Ancho: 100%
Altura: 300px
Posición: Absoluta
Imagen de fondo (ajustada a Cover y Center)
Es importante establecer la posición como absoluta, y veremos por qué en el siguiente paso.
Paso 2: Añade el texto
Ahora añadiremos el texto que aparecerá al pasar el ratón. Primero arrastraremos un bloque div y luego colocaremos un encabezado 3 y un párrafo dentro del div.
Después, añadiremos una clase a nuestro bloque div (llamándola "Text Wrapper") para poder ejecutar nuestra animación CSS y añadiremos estos estilos:
Nombre de la clase: Text Wrapper
Relleno: 20px por todos los lados
Posición: Absoluta - Cubrir
Color de fondo: rgba(0,0,0,0.8)
Color del texto: Blanco
El posicionamiento absoluto funciona en este bloque porque el bloque de miniatura que lo contiene tiene una posición relativa. Esto hace que el contenedor de texto esté posicionado de forma absoluta, en relación con el bloque de miniatura.
Paso 3: Añade una interacción a nuestro contenedor de texto
Puedes gestionar este siguiente paso de dos maneras: puedes usar CSS simple directamente en el panel de estilos o usar las interacciones de Webflow. Para este ejemplo, usaré las interacciones de Webflow.
Necesitamos añadir una interacción a nuestro contenedor de texto. Lo haremos seleccionando el elemento, navegando al panel de interacciones y creando una nueva interacción.
Le pondremos un nombre y luego añadiremos la apariencia inicial (cómo se ve el objeto antes de que ocurra cualquier activación). En este caso, queremos que el texto tenga una opacidad inicial del 0% para que sea invisible.
Paso 4: Añade un activador de pasar el ratón (hover)
Ahora que tenemos la apariencia inicial, añadamos el activador para ejecutar la interacción. Haremos clic en el botón "+" en la sección de activadores y seleccionaremos "Hover" como nuestra opción.
En nuestra sección de "Hover Over", configuraremos el elemento para que pase de una opacidad del 0% (su apariencia inicial) a una del 100% en 500 milisegundos.
Cuando dejamos de pasar el ratón por encima del elemento, queremos que vuelva a su apariencia inicial de 0% de opacidad.
Paso 5: Vista previa
¡Y eso es todo! Al echar un vistazo en el modo de vista previa, vemos que el texto es invisible por defecto, pero aparece al pasar el ratón por encima.
¡Juega con tus opciones!
Por supuesto, esta es solo una forma de lograr una superposición de texto. Puedes crear una gran variedad de efectos diferentes simplemente ajustando la apariencia inicial y las opciones de pasar el ratón.
Por ejemplo, en la interacción de abajo, cambié la apariencia inicial del contenedor de texto para ampliarlo al 110 % (1.1), luego reducirlo a su tamaño original al pasar el cursor, y volver al 110 % al quitarlo. ¡Eso le da un toque muy dinámico al efecto!
Comparte tu trabajo
Pruébalo tú mismo y comparte tu trabajo con nosotros en Facebook y Twitter!
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.
