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.