het volgende is een gastbericht van Dylan Winn-Brown, die ons een performante manier toont om dit ontwerpeffect te bereiken.

tijdens het werken aan de website van een cliënt onlangs, werd mij gevraagd om een effect als dit te repliceren.

Dit type effect wordt met name gebruikt in portefeuilletype situaties waarin het ontwerp zowel visuele als informatieve details wil weergeven.

er zijn veel verschillende mogelijke methoden

omdat ik nog nooit een effect als dit had gemaakt, begon ik verschillende manieren te bekijken om dit te doen en kwam ik een aantal verschillende methoden tegen.

een optie was om een jQuery Plugin te gebruiken. Deze was niet echt het effect dat ik wilde, en zeker niet erg licht van gewicht.

een andere optie was om een <img> in de container te plaatsen en te manipuleren met CSS. Er kunnen hier enkele potentiële voordelen zijn, zoals de mogelijkheid om de bron in te stellen met srcset zodat de gebruikte image geschikt is voor prestaties en apparaten.

In mijn situatie wilde ik het effect volledig in CSS beheren, dus ging ik daarvoor.

basisfunctionaliteit

om optimale prestaties te bereiken, heb ik besloten om de eigenschap CSS transform te gebruiken om de vergroting van de afbeelding af te handelen. (CSS-animaties profiteren van hardwareversnelling en zien er daardoor soepeler uit dan andere animatiemethoden.)

i.p.v. een <img>, gebruikte ik een extra <div> in de ouder om op te treden als de afbeelding. De structuur is:

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

eerst specificeren we de afmetingen voor het bovenliggende element. Vervolgens kan het kind de ouder vullen met width: 100% en height: 100%;, evenals de achtergrondafbeelding instellen, zodat deze schaalt om het gebied te bedekken.

.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;}

we voegen zwevende effecten toe aan ons ouder element dat ons kind element zal beïnvloeden. Een scherpstelstijl is ook goed voor toegankelijkheid:

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

u kunt een hulpmiddel gebruiken voor het toevoegen van voorvoegsels voor de best mogelijke browserondersteuning.

om het basiseffect af te ronden, kunnen we enkele overgangen toevoegen aan de normale status van het onderliggende element:

transition: all .5s;

Als u een kleuroverlay wilt toevoegen, kunt u gebruik maken van pseudo-elementen zoals ::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;}

als we nu met de muis over het bovenliggende element gaan, moet het onderliggende element een kleuroverlay tonen!

tot slot zullen we bespreken hoe je wat tekst toevoegt om te laten zien op onze overlay. We kunnen een element toevoegen aan ons huidige onderliggende element als volgt:

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

we kunnen onze <span> enige stijl geven:

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

en we kunnen het alleen zichtbaar maken als we de muisaanwijzer op de .parent:

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

Live Demo

zie de pen afbeelding zoom op hover – portfolio websites door Dylan (@dwinnbrown) op CodePen.

Mobiele Ondersteuning

als de containers koppelingen zijn en de hover-statussen geen essentiële informatie onthullen, kunt u deze met rust laten.