Creați o galerie și creșterea imaginii atunci când faceți clic

Creați o galerie obișnuită - prea ușor. Hai să facem mai „viu“ și interesant, folosind proprietățile CSS3! În plus, nu se aplică pentru al oricărei alte JS și JQeury.

În acest exemplu, vă voi arăta cum să faci o galerie de colorat și original, folosind doar proprietăți HTML și CSS3.

Caracteristica principală în galeria de imagini este în creștere, făcând clic pe ele.
De fapt, este foarte simplu, trebuie doar să utilizeze un atribut de HTML si CSS pseudo-unul.

Da, asta ar fi atunci când faceți clic pe imaginea este mărită, este necesar să se adauge un atribut tabindex, care poate fi orice număr întreg, pornind de la zero. În plus, atunci când apăsați tasta Tab va fi majorat în mod automat de către următoarea imagine.

Primul pas este de a emite tag-ul în sine . Puteți adăuga imediat transparență, umbre netede, precum și liniuțe:

Acum este necesar pentru a elimina efectul de transparență atunci când treci, și nu atunci când faceți clic:

Rămâne doar să fie făcut pentru a mări imaginea atunci cand este apasat. Pentru aceasta folosim pseudo. Dar ce. Hover. activă. link-ul de aici nu este în mod clar se potrivesc. Pentru acest caz este pseudo potrivit: focus. din moment ce funcționează doar atunci când faceți clic pe obiect și dispare atunci când există un alt clic.

Aproape gata. Dar acum, când faceți clic pe imaginea de lângă ea a format o linie galbenă, cum ar fi Google Chrome. Acest lucru este ușor de corectat prin adăugarea proprietăților unui accident vascular cerebral cu valoarea de zero: