følgende er en gjest innlegg Av Dylan Winn-Brown, som viser oss en performant måte å oppnå dette design effekt.

mens jeg jobbet på en kundes nettsted nylig, ble jeg bedt om å gjenskape en effekt som dette.

denne typen effekt brukes spesielt i porteføljetype situasjoner der designet har til hensikt å vise både visuelle og informative detaljer.

det er mange forskjellige mulige metoder

da jeg aldri hadde skapt en effekt som dette før, begynte jeg å se på forskjellige måter å gjøre dette på og kom over en rekke forskjellige metoder.

ett alternativ var å bruke en Jquery Plugin. Denne var ikke helt effekten jeg var etter, og absolutt ikke veldig lett.Et annet alternativ var å plassere en <img> i beholderen og manipulere DEN MED CSS. Det kan være noen potensielle fordeler her, som å kunne sette kilden med srcset slik at bildet som brukes er ytelse og enhetstilpasset.

i min situasjon ønsket jeg å styre effekten helt I CSS, så jeg gikk for det.

Grunnleggende funksjonalitet

for å oppnå optimal ytelse bestemte JEG MEG for Å bruke CSS transform egenskapen for å håndtere utvidelsen av bildet. (CSS animasjoner nytte maskinvareakselerasjon og som et resultat vises jevnere enn andre metoder for animere.)

I Stedet for en <img>, brukte jeg en ekstra <div> inne i foreldrene for å fungere som bildet. Strukturen er:

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

først angir vi dimensjonene for foreldreelementet. Da kan barnet fylle foreldrene ved hjelp av width: 100% og height: 100%;, samt angi bakgrunnsbildet, slik at det skalerer for å dekke 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 legger deretter sveveeffekter til vårt overordnede element som vil påvirke vårt barnelement. En fokusstil er også bra for tilgjengelighet:

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

du vil kanskje bruke et verktøy for å legge til prefikser for best mulig nettleserstøtte.

for å fullføre den grunnleggende effekten, kan vi legge til noen overganger til barnets elementets normale tilstand:

transition: all .5s;

Hvis du vil legge til et fargeoverlegg, kan du bruke 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;}

Nå når vi svinger på foreldreelementet, bør barnelementet vise et fargeoverlegg!

Til Slutt vil Vi dekke hvordan du legger til litt tekst som skal vises på overlegget vårt. Vi kan legge til et element til vårt nåværende barnelement slik:

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

Vi kan gi vår <span> noen stil:

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

og vi kan bare gjøre det synlig når vi svinger på .parent:

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

Live Demo

se Pen Image zoom på hover-portefølje nettsteder Av Dylan (@dwinnbrown) På CodePen.

Mobil Støtte

hvis beholderne er koblinger og svevestatene ikke avslører noen viktig informasjon, kan du bare la den være alene.