Construire un mur de photos animées avec CSS

Aujourd'hui, nous allons nous lancer dans l'aventure de la création d'une nouvelle démo CSS impressionnante et amusante. Cette fois, nous allons créer un grand mur de photos sans couture. Lorsque l'utilisateur survole une image, une superposition noire transparente la disparaît au fur et à mesure qu'une étiquette de texte apparaît et que l'image s'agrandit.

Le résultat est assez glissant et j'ai également ajouté une deuxième version bonus à ceux qui l'ont fait tout au long du didacticiel. Poursuivez votre lecture pour commencer!

Aperçu

Si vous souhaitez savoir où nous allons, vous pouvez jeter un coup d'œil au résultat final en cliquant sur le lien ci-dessous.

Démo: Cliquez ici pour lancer.

Le HTML

La première chose à faire est de créer la structure générale de notre page et d’en incorporer le contenu. Tout ce dont nous avons besoin, c’est d’un div conteneur unique et d’une liste non ordonnée.

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

Il est maintenant temps de mettre quelque chose dans la liste. Nous commençons par un paragraphe parce que notre objectif ultime est de faire apparaître du texte en survol. Ensuite, nous jetons dans une image.

<ul> <li><img src="//lesptitesaffairesdemayl.be/img/images_1/build-an-animated-photo-wall-with-css.jpg"> <h2>Version alternative</h2> <p>Si vous avez vérifié la démo ci-dessus, vous avez peut-être remarqué qu'il existe deux versions. Le premier s'appelle? Fade? et c'est celui que nous venons de mettre en place. La seconde s'appelle? Flip? et a un effet différent qui vous donne une idée de la grande variété de résultats que vous pouvez obtenir avec cette configuration.</p> <p>Pour la plupart, le CSS Flip est le même. Les principales différences sont que j'ai supprimé la transition du paragraphe et changé l'effet de fondu en une transformation CSS qui réduit la largeur de l'image et la développe dans le sens opposé. Le résultat est l'effet de retournement d'un homme paresseux. </p> <textarea wrap="soft" readonly=""> / * ------ PARAGRAPHE ------ * / .container li p {color: transparent; fond: transparent; police: 200 'Arvo', 30px / 187px, Helvetica, Arial, sans serif; text-align: center; text-transform: majuscule; position: absolue; en haut: 0; gauche: 0; largeur: 280px; hauteur: 187px; } .container li: hover p {color: white; arrière-plan: rgba (0,0,0,0,7); z-index: 1; } / * ------ IMAGES ------ * / .container img {width: 280px; hauteur: 187px; -webkit-transition: tous les 0.7 sont faciles; -moz-transition: tous les 0.7s facilité; -o-transition: tous les 0.7s sont faciles; -ms-transition: tous les 0.7s facilité; transition: tous les 0.7s se relâchent; } .container li: survoler img {-webkit-transform: scale (-1, 1); -moz-transform: scale (-1, 1); -o-transformer: échelle (-1, 1); z-index: -3; }

Conclusion

J'espère que vous aurez autant de plaisir à construire cette petite expérience que je l'ai fait. Cela devrait vous fournir une bonne pratique pour des choses comme tirer un zoom ou un retournement avec CSS.

Si vous avez apprécié le tutoriel, laissez un commentaire ci-dessous et faites-le nous savoir. Veillez également à indiquer comment vous souhaitez le modifier ou l'améliorer!