følgende er et gæstepost af Dylan, der viser os en performant måde at opnå denne designeffekt på.

mens jeg arbejdede på en klients hjemmeside for nylig, blev jeg bedt om at replikere en effekt som denne.

denne type effekt bruges især i situationer af porteføljetype, hvor designet har til hensigt at vise både visuelle og informative detaljer.

der er mange forskellige mulige metoder

da jeg aldrig havde skabt en effekt som denne før, begyndte jeg at se på forskellige måder at gøre dette på og stødte på en række forskellige metoder.

en mulighed var at bruge et Plugin. Denne var ikke helt den effekt, jeg var efter, og bestemt ikke meget let.

en anden mulighed var at placere en<img> i beholderen og manipulere den med CSS. Der kan være nogle potentielle fordele her, som at kunne indstille kilden med srcset, så det anvendte billede er ydeevne og enhed-passende.

i min situation ønskede jeg at styre effekten helt i CSS, så jeg gik til det.

grundlæggende funktionalitet

for at opnå optimal ydeevne besluttede jeg at bruge CSStransform egenskaben til at håndtere udvidelsen af billedet. (CSS-animationer drager fordel af udstyrsacceleration og ser derfor glattere ud end andre animationsmetoder.)

i stedet for en <img> brugte jeg en ekstra <div> inde i forælderen til at fungere som billedet. Strukturen er:

<div class="parent"> <div class="child"></div></div>

først angiver vi dimensionerne for det overordnede element. Derefter kan barnet udfylde forælderen ved hjælp af width: 100%og height: 100%;, samt indstille baggrundsbilledet og sikre, at det skaleres for at dække området.

.parent { width: 400px; height: 300px;}.child { width: 100%; height: 100%; background-color: black; /* fallback color */ background-image: url("images/city.jpg"); background-position: center; background-size: cover;}

Vi tilføjer derefter hovereffekter til vores forældreelement, som vil påvirke vores barnelement. En fokusstil er også god til tilgængelighed:

.parent:hover .child,.parent:focus .child { transform: scale(1.2);}

du vil muligvis bruge et værktøj til at tilføje præfikser for den bedst mulige bro.ser-understøttelse.

for at afslutte den grundlæggende effekt kan vi tilføje nogle overgange til vores barnelements normale tilstand:

transition: all .5s;

Hvis du vil tilføje et farveoverlay, kan du bruge pseudoelementer som ::before:

.child::before { content: ""; display: none; height: 100%; width: 100%; position: absolute; top: 0; left: 0; background-color: rgba(52, 73, 94, 0.75);}.parent:hover .child:before,.parent:focus .child:before { display: block;}

nu når vi svæver på forældreelementet, skal underelementet vise et farveoverlay!

endelig dækker vi, hvordan du tilføjer noget tekst, der skal vises på vores overlay. Vi kan tilføje et element til vores nuværende børneelement som sådan:

<div class="parent"> <div class="child"> <span>Hello</span> </div></div>

Vi kan give vores <span> nogle stil:

span { color: white; /* Good thing we set a fallback color! */ font-family: sans-serif; padding: 25%; position: absolute;}

og vi kan kun gøre det synligt, når vi svæver på .parent:

.parent:hover span,.parent:focus span { display: block;}

Live Demo

se pennens billedforstørrelse på hover – portfolio hjemmesider af Dylan (@) på CodePen.

mobil Support

hvis containerne er links, og svævetilstandene ikke afslører nogen væsentlig information, kan du bare lade den være i fred.