următorul este un post invitat de Dylan Winn-Brown, care ne arată o modalitate performantă de a realiza acest efect de design.

în timp ce lucram recent pe site-ul unui client, mi s-a cerut să reproduc un efect ca acesta.

acest tip de efect este utilizat în special în situații de tip portofoliu în care designul intenționează să arate atât detalii vizuale, cât și informaționale.

există multe metode posibile diferite

deoarece nu mai creasem niciodată un efect ca acesta, am început să arunc o privire asupra diferitelor moduri de a face acest lucru și am dat peste o serie de metode diferite.

o opțiune a fost de a utiliza un Plugin jQuery. Acesta nu a fost destul de efectul am fost după, și cu siguranță nu foarte ușor.

o altă opțiune a fost poziționarea unui<img> în container și manipularea acestuia cu CSS. Ar putea exista unele beneficii potențiale aici, cum ar fi posibilitatea de a seta sursa cu srcset astfel încât imaginea utilizată să fie performantă și adecvată dispozitivului.

în situația mea, am vrut să gestionez efectul în întregime în CSS, așa că am mers pentru asta.

funcționalitate de bază

pentru a obține performanțe optime, am decis să folosesc proprietatea CSStransform pentru a gestiona extinderea imaginii. (Animațiile CSS beneficiază de accelerarea hardware și, ca rezultat, apar mai lin decât alte metode de animare.)

Mai degrabă decât un<img>, am folosit un<div> suplimentar în interiorul părintelui pentru a acționa ca imagine. Structura fiind:

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

Mai întâi specificăm dimensiunile pentru elementul părinte. Apoi, copilul poate umple părintele folosindwidth: 100% șiheight: 100%;, precum și setați imaginea de fundal, asigurându-l scalează pentru a acoperi zona.

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

apoi adăugăm efecte de hover elementului nostru părinte care va afecta elementul nostru copil. Un stil de focalizare este bun și pentru accesibilitate:

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

poate doriți să utilizați un instrument pentru adăugarea de prefixe pentru cel mai bun suport posibil pentru browser.

pentru a termina efectul de bază, putem adăuga câteva tranziții la starea normală a elementului nostru copil:

transition: all .5s;

Dacă doriți să adăugați o suprapunere de culoare, puteți folosi pseudo elemente precum ::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;}

acum, când ne hover pe elementul părinte, elementul copil ar trebui să arate o suprapunere de culoare!

în cele din urmă, vom acoperi modul de adăugare a unui text pentru a fi afișat pe suprapunerea noastră. Putem adăuga un element la elementul nostru copil actual, astfel:

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

putem da <span> un stil:

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

și îl putem face vizibil doar atunci când planăm pe .parent:

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

Live Demo

a se vedea Zoom imagine stilou pe site – urile hover-portofoliu de Dylan (@dwinnbrown) pe CodePen.

suport mobil

în cazul în care containerele sunt link-uri și Statele hover nu dezvăluie nici o informație esențială, s-ar putea lăsa doar în pace.