3 Cool efectos de desplazamiento de imagen CSS3
En la web moderna, existen numerosas técnicas que se pueden utilizar para crear interacciones interesantes, pero la más simple y elegante suele ser CSS, y específicamente las adiciones que vienen con CSS3.
En los viejos tiempos, teníamos que confiar en JavaScript para este tipo de efecto, pero gracias a la compatibilidad cada vez mayor para CSS3 en todos los navegadores, ahora es posible configurar efectos como estos sin ningún tipo de script. Desafortunadamente, todavía hay navegadores (IE9 y siguientes) que no son compatibles con CSS3, por lo que necesitará una alternativa para los navegadores heredados o para tratar el efecto como una mejora progresiva.
Hoy, vamos a ver cómo podemos aplicar efectos de vuelo fresco pero pulcro para mostrar y ocultar los títulos de las imágenes.
Si prefiere seguir el código, puede descarga los archivos aquí
Demo 1
La primera demostración es la más simple: la imagen volará a la derecha para revelar la leyenda.
El marcado
Para nuestro html de la segunda demostración, utilizaremos marcas similares a nuestra primera demostración. Pero esta vez utilizaremos demo-2 como clase y agregaremos la clase cero :
This is a cool title!
Lorem ipsum dolor sit amet.
El CSS
Nuestro CSS será casi el mismo que el primer demo, excepto que esta vez moveremos nuestra imagen hacia abajo configurando la parte inferior de la propiedad a -96px. También usaremos la transición de CSS3 para crear un efecto suave:
.demo-2 {position:relative;width:300px;height:200px;overflow:hidden;float:left;margin-right:20px;background-color:rgba(26,76,110,0.5)}.demo-2 p,.demo-2 h2 {color:#fff;padding:10px;left:-20px;top:20px;position:relative}.demo-2 p {font-family:'Lato';font-size:12px;line-height:18px;margin:0}.demo-2 h2 {font-size:20px;line-height:24px;margin:0;font-family:'Lato'}.effect img {position:absolute;left:0;bottom:0;cursor:pointer;margin:-12px 0;-webkit-transition:bottom .3s ease-in-out;-moz-transition:bottom .3s ease-in-out;-o-transition:bottom .3s ease-in-out;transition:bottom .3s ease-in-out}.effect img.top:hover {bottom:-96px;padding-top:100px}h2.zero,p.zero {margin:0;padding:0}Demo 3
Para nuestra última demostración, crearemos un efecto de tarjeta de intercambio. Esto significa que cuando coloca el mouse sobre la imagen, girará sobre su eje para revelar la descripción.