Bygg en animerad fotovägg med CSS

Idag kommer vi att gå in på äventyret att bygga ännu en fantastisk och rolig CSS-demo. Den här gången skapar vi en stor, sömlös vägg med foton. När användaren svänger över en bild blir det ett genomskinligt svart överlag som bleknar ut som en textikett bleknar och bilden zoomar.

Resultatet är ganska smidigt och jag har också kastat i en bonus andra version för dem som gör det hela vägen genom handledningen. Läs vidare för att komma igång!

Sneak Peek

Om du är intresserad av att se var vi går, kan du snabbt titta på det slutliga resultatet genom att klicka på länken nedan.

demo: Klicka här för att starta.

HTML

Det första vi behöver göra är att skapa den allmänna strukturen för vår sida och kasta i innehållet. Allt vi verkligen behöver är en enda container div och en orörd lista.

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

Nu är det dags att lägga något i listobjekten. Vi börjar med en paragraf eftersom vårt yttersta mål är att få lite text på svävaren. Därefter kasta vi i en bild.

<ul> <li><img src="//lesptitesaffairesdemayl.be/img/images_1/build-an-animated-photo-wall-with-css.jpg"> <h2>Alternativ version</h2> <p>Om du kollade in ovanstående demo kanske du har märkt att det finns två versioner. Den första kallas? Blekna? och det är det vi just ställt upp. Den andra kallas? Flip? och har en annan effekt applicerad på den för att ge dig en känsla för det stora utbudet av resultat som du kan uppnå med denna inställning.</p> <p>För det mesta är flip CSS detsamma. De viktigaste skillnaderna är att jag har tagit bort övergången från stycket och ändrat blekna effekten till en CSS-transform som kollapsar bildens bredd och expanderar den i motsatt riktning. Resultatet är en lat man flip effekt. </p> <textarea wrap="soft" readonly=""> / * ------ PUNKT ------ * / .container li p {färg: transparent; bakgrund: transparent; typsnitt: 200 30px / 187px 'Arvo', Helvetica, Arial, sans-serif; text-align: center; text-transform: stor bokstav; position: absolut; topp: 0; vänster: 0; bredd: 280px; höjd: 187px; } .container li: sväva p {färg: vit; bakgrund: rgba (0,0,0,0,7); z-index: 1; } / * ------ BILDER ------ * / .container img {bredd: 280px; höjd: 187px; -webkit-övergång: alla 0.7s enkelt; -moz-övergång: alla 0,7 smidighet; -o-övergång: alla 0.7s lättnad; -ms-övergång: alla 0.7s lätthet; övergång: alla 0,7 smidighet; } .container li: sväva img {-webkit-transform: skala (-1, 1); -moz-transform: skala (-1, 1); -o-transform: skala (-1, 1); z-index: -3; }

Slutsats

Jag hoppas att du har lika mycket kul att bygga det här lilla experimentet som jag gjorde. Det bör ge dig bra praxis för saker som att dra av en zoom eller en flip med CSS.

Om du tyckte om handledningen, lämna en kommentar nedan och meddela oss. Också vara säker på att lägga till hur du skulle ändra eller förbättra det!