Creșterea imaginilor de fundal

Recent am lucrat pe un site client și mi-a cerut să creez un astfel de efect. Acest efect este foarte frecvent utilizat în portofoliul de site-uri, unde site-ul ar trebui să prezinte componente vizuale și de informare. Există multe metode diferite. N-am mai făcut niciodată așa ceva înainte. Am început să înțeleg și am găsit mai multe metode diferite.

Prima metodă a fost folosirea pluginului jQuery. Nu exact efectul pe care îl căutam. În plus, mufa cântărește foarte mult.

O altă modalitate a fost de a pune tag-ul img în container și de a manipula imaginea utilizând CSS. Există plusuri aici: puteți seta sursa utilizând atributul srcset pentru a încărca o imagine adecvată pentru un anumit dispozitiv.
În cazul meu, am vrut să controlez efectul de zoom în întregime prin CSS, așa că am ales a doua metodă.

Funcționalitatea de bază

Pentru o performanță optimă, am decis să folosesc proprietatea transformă pentru a mări imaginea. Astfel, obținem o animație CSS cu accelerare hardware, ceea ce o face mai netedă.

Curs practic pe aterizare adaptivă de la zero!

Aflați de la zero pentru a adapta aterizările adaptive la HTML5 și CSS3 în următoarele 6 zile

În loc de eticheta img, am luat o etichetă div și am pus-o într-un container. Acest bloc a trebuit să simuleze lucrarea etichetei img. structura:

Mai întâi, trebuie să setați dimensiunea elementului părinte. Elementele copil pot umple blocul parent folosind lățimea: 100% și înălțimea: 100%; proprietăți. De asemenea, trebuie să setați o imagine de fundal care va închide 100% din bloc.

Apoi adăugăm efectul de hovering la blocul părinte. Acest efect va afecta elementul copil. Pseudo-clasa de focus este foarte potrivită pentru accesibilitate:

Pentru asistență maximă în browsere, puteți utiliza un instrument special pentru a adăuga prefixele furnizorilor. Completând efectul de bază, puteți adăuga câteva tranziții ușoare pentru starea normală a elementului copil:

Pentru a adăuga un strat suprapus cu o anumită culoare, puteți utiliza pseudo-elemente de tipul. înainte de:

Dacă îndreptați mouse-ul către blocul părinte, trebuie să apară un strat colorat deasupra elementului copil! În cele din urmă, vom examina modul de adăugare a textului în stratul suprapus. Puteți adăuga un element nou la blocul nostru de copii:

Eticheta Span poate fi setată la câteva stiluri:

Textul apare numai când treceți cursorul pe blocul .parent: