Erstellen Sie eine animierte Fotowand mit CSS

Heute beginnen wir mit dem Abenteuer, eine weitere fantastische und unterhaltsame CSS-Demo zu erstellen. Dieses Mal erstellen wir eine große, nahtlose Wand mit Fotos. Wenn der Benutzer den Mauszeiger über ein Bild bewegt, wird es durch eine transparente schwarze Überlagerung ausgeblendet, wenn eine Textbeschriftung eingeblendet wird und das Bild vergrößert wird.

Das Ergebnis ist ziemlich glatt und ich habe auch eine zweite Bonusversion für diejenigen, die es durch das Tutorial schaffen. Lesen Sie weiter, um loszulegen!

Vorgeschmack

Wenn Sie wissen möchten, wohin wir gehen, können Sie einen kurzen Blick auf das Endergebnis werfen, indem Sie auf den Link unten klicken.

Demo: Klicken Sie hier, um zu starten.

Das HTML

Das erste, was wir tun müssen, ist die allgemeine Struktur für unsere Seite und den Inhalt zu erstellen. Alles, was wir wirklich brauchen, ist eine einzige Container-Division und eine ungeordnete Liste.

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

Jetzt ist es an der Zeit, etwas in die Listenelemente aufzunehmen. Wir fangen mit einem Absatz an, weil unser letztes Ziel darin besteht, dass Text im Schwebeflug angezeigt wird. Als Nächstes werfen wir ein Bild ein.

<ul> <li><img src="//lesptitesaffairesdemayl.be/img/images_1/build-an-animated-photo-wall-with-css.jpg"> <h2>Alternative Version</h2> <p>Wenn Sie die obige Demo ausgecheckt haben, haben Sie möglicherweise festgestellt, dass es zwei Versionen gibt. Die erste heißt? Fade? und das ist das, was wir gerade eingerichtet haben. Die zweite heißt? Flip? und hat einen anderen Effekt, um ein Gefühl für die vielfältigen Ergebnisse zu erhalten, die Sie mit diesem Setup erzielen können.</p> <p>Meistens ist das Flip-CSS dasselbe. Die Hauptunterschiede sind, dass ich den Übergang vom Absatz entfernt und den Überblendeffekt in eine CSS-Transformation geändert habe, die die Breite des Bildes reduziert und in die entgegengesetzte Richtung ausdehnt. Das Ergebnis ist der Flip-Effekt eines faulen Mannes. </p> <textarea wrap="soft" readonly=""> / * ------ PARAGRAPH ------ * / .container li p {color: transparent; Hintergrund: transparent; Schrift: 200 30px / 187px 'Arvo', Helvetica, Arial, serifenlos; Text ausrichten: Mitte; Text-Transformation: Großbuchstaben; Position: absolut; oben: 0; links: 0; Breite: 280px; Höhe: 187px; } .container li: hover p {color: white; Hintergrund: rgba (0,0,0,0,7); z-Index: 1; } / * ------ IMAGES ------ * / .container img {width: 280px; Höhe: 187px; -webkit-Übergang: alle 0.7s Leichtigkeit; -Moz-Übergang: alle 0,7s Leichtigkeit; -o-Übergang: alle 0,7 s Leichtigkeit; -ms-Übergang: alle 0,7s Leichtigkeit; Übergang: alle 0,7s Leichtigkeit; } .container li: hover img {-webkit-transform: scale (-1, 1); -Moz-Transformation: Maßstab (-1, 1); -o-transform: Maßstab (-1, 1); z-Index: -3; }

Fazit

Ich hoffe, Sie haben so viel Spaß beim Aufbau dieses kleinen Experiments wie ich. Es sollte Ihnen einige bewährte Methoden für Dinge bieten, wie das Zoomen oder das Umdrehen mit CSS.

Wenn dir das Tutorial gefallen hat, hinterlasse einen Kommentar und lass es uns wissen. Stellen Sie sicher, dass Sie hinzufügen, wie Sie es ändern oder verbessern würden!