Costruisci un muro fotografico animato con i CSS

Oggi intraprenderemo l'avventura di costruire un'altra fantastica demo CSS. Questa volta creeremo un grande muro di foto senza interruzioni. Quando l'utente si posiziona su un'immagine, una sovrapposizione di nero trasparente la dissolverà quando un'etichetta di testo si dissolverà e l'immagine ingrandirà.

Il risultato è piuttosto fluido e ho anche lanciato una seconda versione bonus per quelli che completano il tutorial. Continua a leggere per iniziare!

Sbirciata

Se sei interessato a vedere dove stiamo andando, puoi dare una rapida occhiata al risultato finale cliccando sul link qui sotto.

demo: Clicca qui per il lancio.

L'HTML

La prima cosa che dobbiamo fare è creare la struttura generale per la nostra pagina e lanciare il contenuto. Tutto ciò di cui abbiamo veramente bisogno è un singolo contenitore div e una lista non ordinata.

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

Ora è il momento di mettere qualcosa negli articoli della lista. Iniziamo con un paragrafo perché il nostro obiettivo finale è far apparire del testo al passaggio del mouse. Successivamente, aggiungiamo un'immagine.

<ul> <li><img src="//lesptitesaffairesdemayl.be/img/images_1/build-an-animated-photo-wall-with-css.jpg"> <h2>Versione alternativa</h2> <p>Se hai controllato la demo qui sopra, potresti aver notato che ci sono due versioni. Il primo si chiama? Fade? e questo è quello che abbiamo appena creato. Il secondo è chiamato? Flip? e ha un effetto diverso applicato per darti un'idea della grande varietà di risultati che puoi ottenere con questa configurazione.</p> <p>Per la maggior parte, il flip CSS è lo stesso. Le principali differenze sono che ho rimosso la transizione dal paragrafo e modificato l'effetto di dissolvenza in una trasformazione CSS che comprime la larghezza dell'immagine e la espande nella direzione opposta. Il risultato è l'effetto vibrazione di un uomo pigro. </p> <textarea wrap="soft" readonly=""> / * ------ PARAGRAPH ------ * / .container li p {color: transparent; sfondo: trasparente; font: 200 30px / 187px 'Arvo', Helvetica, Arial, sans-serif; allineamento del testo: centro; text-transform: maiuscolo; posizione: assoluta; inizio: 0; a sinistra: 0; larghezza: 280 px; altezza: 187 px; } .container li: hover p {color: white; sfondo: rgba (0,0,0,0,7); z-index: 1; } / * ------ IMMAGINI ------ * / .container img {width: 280px; altezza: 187 px; -webkit-transition: tutti gli 0.7s sono facili da usare; -moz-transition: tutti gli 0.7s sono facili; -o-transizione: tutti i 0.7s si muovono; -ms-transition: tutti gli 0.7s sono facili da usare; transizione: tutti gli 0.7s sono facili; } .container li: hover img {-webkit-transform: scale (-1, 1); -moz-transform: scale (-1, 1); -o-transform: scale (-1, 1); z-index: -3; }

Conclusione

Spero che ti sia divertito tanto a costruire questo piccolo esperimento come ho fatto io. Dovrebbe fornirti alcune buone pratiche per cose come tirare fuori uno zoom o un capovolgimento con CSS.

Se ti è piaciuto il tutorial, lascia un commento qui sotto e facci sapere. Assicurati anche di aggiungere come cambieresti o migliorerai!