Construye un muro de fotos animado con CSS

Hoy nos embarcaremos en la aventura de construir otra demostración de CSS impresionante y divertida. Esta vez vamos a crear una gran pared de fotos sin fisuras. Cuando el usuario se desplaza sobre una imagen, una superposición negra transparente se desvanecerá a medida que la etiqueta de texto se difumina y la imagen se amplía.

El resultado es bastante elegante y también he incluido una segunda versión adicional para aquellos que lo han hecho a lo largo del tutorial. ¡Sigue leyendo para empezar!

Vistazo

Si está interesado en ver a dónde vamos, puede echar un vistazo rápido al resultado final haciendo clic en el siguiente enlace.

Manifestación: Haga clic aquí para iniciar.

El HTML

Lo primero que debemos hacer es crear la estructura general de nuestra página y lanzar el contenido. Todo lo que realmente necesitamos es un solo contenedor div y una lista desordenada.

<ul> <li></li> <li></li> <li></li> </ul>

Ahora es el momento de poner algo en la lista de elementos. Comenzamos con un párrafo porque nuestro objetivo final es que aparezca un texto al pasar el cursor. A continuación, tiramos en una imagen.

<ul> <li><img src="//lesptitesaffairesdemayl.be/img/images_1/build-an-animated-photo-wall-with-css.jpg"> <h2>Versión alternativa</h2> <p>Si verificó la demostración anterior, es posible que haya notado que hay dos versiones. El primero se llama? Fade? y ese es el que acabamos de configurar. El segundo se llama? Flip? y se le aplica un efecto diferente para darle una idea de la amplia variedad de resultados que puede lograr con esta configuración.</p> <p>En su mayor parte, el flip CSS es el mismo. Las principales diferencias son que eliminé la transición del párrafo y cambié el efecto de fundido a una transformación CSS que colapsa el ancho de la imagen y la expande en la dirección opuesta. El resultado es un efecto flip de un hombre perezoso. </p> <textarea wrap="soft" readonly=""> / * ------ PARAGRAPH ------ * / .container li p {color: transparente; fondo: transparente; fuente: 200 30px / 187px 'Arvo', Helvetica, Arial, sans-serif; text-align: center; transformación de texto: mayúsculas; posición: absoluta; arriba: 0; izquierda: 0; ancho: 280px; altura: 187px; } .container li: hover p {color: blanco; fondo: rgba (0,0,0,0.7); índice z: 1; } / * ------ IMÁGENES ------ * / .container img {width: 280px; altura: 187px; -webkit-transición: toda la facilidad de 0.7s; -moz-transición: toda la facilidad de 0.7s; -o-transición: toda la facilidad de 0.7s; -ms-transición: toda la facilidad de 0.7s; transición: toda la facilidad de 0.7s; } .container li: hover img {-webkit-transform: scale (-1, 1); -moz-transform: scale (-1, 1); -o-transformada: escala (-1, 1); índice z: -3; }

Conclusión

Espero que te diviertas tanto construyendo este pequeño experimento como lo hice yo. Debería proporcionarle algunas buenas prácticas para cosas como sacar un zoom o voltear con CSS.

Si te ha gustado el tutorial, deja un comentario a continuación y avísanos. ¡También asegúrese de agregar cómo lo cambiaría o lo mejoraría!