seuraava on Dylan Winn-Brownin vieraileva viesti, joka näyttää meille performantin tavan toteuttaa tämä design-efekti.

työskennellessäni erään asiakkaan verkkosivuilla äskettäin minua pyydettiin toistamaan tällainen vaikutus.

tämäntyyppistä efektiä käytetään erityisesti portfoliotyyppisissä tilanteissa, joissa suunnittelussa pyritään näyttämään sekä visuaalisia että informatiivisia yksityiskohtia.

on olemassa monia erilaisia mahdollisia menetelmiä

koska en ollut koskaan aiemmin luonut tällaista efektiä, aloin tutkia eri tapoja tehdä tämä ja törmäsin useisiin eri menetelmiin.

yksi vaihtoehto oli käyttää jQuery-liitännäistä. Tämä ei ollut ihan sellainen efekti kuin olin hakemassa, eikä varsinkaan kovin kevyt.

toinen vaihtoehto oli sijoittaa <img> konttiin ja manipuloida sitä CSS: llä. Tässä voisi olla joitakin mahdollisia etuja, kuten se, että lähde voidaan asettaa srcset siten, että käytetty kuva on suorituskykyä ja laitetta vastaava.

tilanteessani halusin hallita efektin kokonaan CSS: ssä, joten lähdin siihen.

perustoiminnot

optimaalisen suorituskyvyn saavuttamiseksi päätin käyttää CSS: ää transform ominaisuutta kuvan laajentamisen hoitamiseen. (CSS-animaatiot hyötyvät laitteistokiihdytyksestä ja sen seurauksena näyttävät tasaisemmilta kuin muut animointimenetelmät.)

sen sijaan, että <img>, käytin ylimääräistä <div> vanhemman sisällä toimiakseni kuvana. Rakenne on:

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

ensin määritellään emoelementin mitat. Sitten lapsi voi täyttää vanhemman käyttämällä width: 100% ja height: 100%; sekä asettaa taustakuvan varmistaen, että se skaalautuu kattamaan alueen.

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

lisäämme sitten emoelementtiimme hover-efektit, jotka vaikuttavat lapsielementtiimme. Tarkennustyyli on hyvä myös saavutettavuuden kannalta:

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

voit käyttää työkalua etuliitteiden lisäämiseen parhaan mahdollisen selaintuen saamiseksi.

perusefektin viimeistelemiseksi voimme lisätä joitakin siirtymiä lapsielementtimme normaaliin tilaan:

transition: all .5s;

Jos haluat lisätä väripeiton, voit käyttää pseudoelementtejä, kuten ::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;}

nyt kun leijutamme emoelementtiä, lapsielementin pitäisi näyttää väripeitto!

lopuksi käydään läpi, miten lisätään kuvakepäällykseen näytettävää tekstiä. Voimme lisätä elementin nykyiseen lapsielementtiimme näin:

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

voimme antaa <span> jonkin tyylin:

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

ja voimme tehdä sen näkyväksi vain, kun leijumme .parent:

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

Live Demo

Katso Dylanin (@dwinnbrown) kuva zoom Hover – portfolio websites-sivustolta Codepenistä.

mobiilituki

Jos kontit ovat linkkejä eivätkä leijuvat tilat paljasta mitään olennaista tietoa, voit jättää sen rauhaan.