- Este debate tiene 2 respuestas, 2 mensajes y ha sido actualizado por última vez el hace 11 meses, 2 semanas por
.
-
Entradas
-
Hola, alguien sabe como puedo recrear esta animación de las imágenes de los post de esta web?
Cuando se coloca el raton sobre la imagen esta cambia de opacidad y se muestra el titulo.https://www.lacol.coop/tipus_de_projecte/destacat/
Parece una tontería pero llevo un rato con esto y no lo consigo, uso generate press por cierto, generate blocks
gracias
Un saludoBuenas!
Pues ingeniosa forma de hacer que las letras aparezcan sin meterle JS, cuando fui a ver pensaba que no sería con CSSLo que hacen son 2 cosas:
1- la imagen al hacer hover le meten el color y la hacen cambiar un poco de tamaño, eso fácil
2- antes de hacer hover, aplican el atributo css «transform: translate3d(100%, 0, 0);» con un transition de 0.35 segundos y una opacidad transparente sobre el párrafo, las letras. Esto hace que las letras no estén si no pones el ratón encima.
Cuando pones el hover sobre la imagen, el párrafo entonces aplica transform: translate3d(0, 0, 0); haciendo que aparezca en el medio, cambiando a la vez opacidad y con el transition, queda ese desplazamiento del texto hacia el centroEs sencillo en realidad, pero veo que queda muy bien
Un saludo!
- Debes estar registrado para responder a este debate.
