Cum se creează un efect de trecere a imaginii în CSS

Efectele de trecere a imaginii pot adăuga un nivel suplimentar de lustruire site-ului dvs. Acestea creează un efect neted, făcând galeriile de imagini sau caruselele mai plăcute de navigat. Cea mai bună parte este că puteți crea aceste efecte doar cu CSS și fără JavaScript.

Puteți crea diferite stiluri de animație pe imaginile dvs. Acestea includ estomparea sau mărirea fundalului, estomparea sau alunecarea în text și schimbarea culorii de fundal.

Crearea HTML-ului pentru imagini

Începeți prin a crea un index.html fișierul într-un folder gol de pe computer, apoi deschideți fișierul cu un editor de text. În interiorul fișierului, creați scheletul HTML și adăugați următorul marcaj în interiorul etichetelor de deschidere și de închidere a corpului:

<divclasă="grilă">
<divclasă=„înveliș de imagine”>
<imgclasă="estompa"src=" https://picsum.photos/500?random=1"alt="">





instagram viewer

<divclasă="conținut se estompează">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
<divclasă=„înveliș de imagine”>
<imgclasă=„mărire estompare”src=" https://picsum.photos/500?random=2"alt="">
<divclasă="conținut se estompează">
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
<divclasă=„înveliș de imagine”>
<imgclasă="estompa"src=" https://picsum.photos/500?random=3"alt="">
<divclasă=„conținut slide-stânga”>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
<divclasă=„înveliș de imagine”>
<imgclasă="gri"src=" https://picsum.photos/500?random=3"alt="">
<divclasă=„conținut slide-stânga”>
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ad
 sed at amet blanditiis ullam ipsum delectus sit recusandae vel!
div>
div>
div>

Acesta este un container grilă cu patru împachetări de imagine. Elementele div cu înveliș de imagine clasa servește ca un înveliș pentru imagine și textul corespunzător. Imaginea și conținutul fiecărei secțiuni au un set unic de clase adăugate.

În interiorul foii de stil, vei vizați aceste elemente după numele lor de clasă și aplicați diferitele efecte de stil și animație. Textul nu se va afișa implicit; îl veți afișa doar când treceți cu mouse-ul peste învelișul imaginii, iar imaginea va suferi diferite efecte în acest proces.

Adăugarea CSS de bază

Acum că ați creat HTML-ul, este timpul să-l stilați cu CSS. Creeaza o stil.css fișier și link la această foaie de stil din fișierul HTML, în interiorul secțiune:

<legăturărel="foaia de stil"href=„style.css”>

În interiorul tău stil.css fișier, primul lucru pe care trebuie să-l faceți este să resetați marja de pe corp la zero și să setați o margine de jos:

corp {
marginea: 0;
margine-fond: 20rem;
}

Apoi, trebuie să transformați recipientul cel mai exterior într-un Grilă CSS pe care o puteți utiliza pentru a așeza elemente în două dimensiuni. Următorul cod creează o grilă cu cât mai multe coloane sau rânduri care se potrivesc. Dimensiunea minimă a fiecărei coloane este de 300 px, iar dimensiunea maximă este de 1 fracțiune a containerului:

.grilă {
afişa: grilă;
grilă-șablon-coloane: repeta(auto-adaptare, minim maxim(300px, 1fr));
}

Deoarece doriți să poziționați textul în raport cu containerul său, trebuie să setați poziția față de învelișul imaginii:

.înveliș de imagine {
poziţie: relativ;
revărsare: ascuns;
}

Următorul pas este să stilați imaginea. Afișați imaginea ca element bloc, faceți-o să se întindă pe lățimea întregului container și plasați-o în centrul containerului său:

.înveliș de imagine > img {
afişa: bloc;
lăţime: 100%;
raportul de aspect: 1 / 1;
potrivire obiect: acoperi;
obiect-poziție: centru;
}

În ceea ce privește textul, poziționați-l central și dați o culoare de fundal transparentă, gri deschis:

.înveliș de imagine > .conţinut {
poziţie: absolut;
medalion: 0;
marimea fontului: 2rem;
umplutura: 1rem;
fundal: rgba(255, 255, 255, .4);
afişa: contracta;
alinierea elementelor: centru;
justifica-conținut: centru;
}

Salvați fișierul CSS și deschideți index.html în browserul dvs. Ar trebui să găsiți o pagină similară cu cea din imaginea de mai jos.

Setarea tranziției pe imagini și texte

Acum că ați aplicat stilurile de bază imaginilor, următorul pas este să adăugați niște animații. Începeți prin a adăuga o tranziție la ambele imagini și la textul lor corespunzător:

.înveliș de imagine > img,
.înveliș de imagine > .conţinut {
tranziție: 200Domnișoarăușurință-in-out;
}

Aceasta înseamnă că toate efectele de tranziție (adică fade-in, zoom și estompare) vor dura 200 de milisecunde și vor avea aceeași curbă de sincronizare.

Fade-In și estompare animație

Primul stil de animație se estompează în text. Când treceți cu mouse-ul peste un anumit pachet de imagini, conținutul care are decolorare clasa va avea acest efect (animație cu fade-in și fade-out) aplicat acesteia. Obțineți acest lucru setând opacitatea la zero și schimbând-o la unu atunci când mouse-ul trece cu mouse-ul pe un anumit înveliș de imagine:

.înveliș de imagine > .conţinut.decolorare {
opacitate: 0;
}
.înveliș de imagine:planare > .conţinut.decolorare {
opacitate: 1;
}

Dacă salvați fișierul și vă verificați browserul, veți vedea animația cu fade-in în vigoare. Dar s-ar putea să observați și că textul este puțin greu de citit (dacă imaginea este puternică și are mult contrast). Amintiți-vă că toate imaginile au și un nume de clasă estompa. Aceasta este pentru estomparea imaginilor pentru a adăuga un contrast atât de necesar între ele și text:

înveliș de imagine:planare > img.estompa {
filtru: estompa(5px)
}

Acum, când treceți cu mouse-ul peste imagine, puteți vedea că se va estompa. Puteți crește valoarea pixelilor pentru a face neclaritatea mai pronunțată pe imagini, adăugând astfel mai mult contrast între acesta și text.

Adăugarea altor efecte

Celelalte efecte sunt glisarea textului din stânga, mărirea imaginii și adăugarea de tonuri de gri imaginii. Iată codul pentru obținerea tuturor celor trei efecte:

.înveliș de imagine > .conţinut.glisa-stânga {
transforma: traduceX(100%)
}
.înveliș de imagine:planare > .conţinut.glisa-stânga {
transforma: traduceX(0%)
}
.înveliș de imagine:planare > img.gri {
filtru: tonuri de gri(1)
}
.înveliș de imagine:planare > img.estompa {
filtru: estompa(5px)
}
.înveliș de imagine:planare > img.zoom {
transforma: scară(1.1)
}

Salvați fișierul, apoi accesați browserul și plasați cursorul peste fiecare imagine. Ar trebui să vedeți diferitele efecte în acțiune.

Pentru a finaliza efectele de glisare, puteți crea încă trei pachete de imagini, fiecare conținând o imagine și text. Fiecare fragment de text ar avea numele clasei glisați în sus, glisați în jos, sau ușor-dreapta. Atunci ai trece valoarea potrivită pixel, em sau rem, în interiorul transforma() funcția pentru a crea toate cele trei efecte.

Grilă CSS și Flexbox

CSS Grid și Flexbox sunt două caracteristici care vă permit să creați layout-uri fantastice pentru site-ul dvs. Puteți crea practic orice aspect doriți cu ușurință și puteți personaliza rândurile și coloanele după gustul dvs. De asemenea, coloanele vor fi receptive în mod implicit. A învăța când să folosești unul față de celălalt te va ajuta să devii un dezvoltator CSS de top 1%.