Hozzon létre egy galériát, és egyre nagyobb a kép, ha rákattint

Hozzon létre egy normál galéria - túl könnyű. Nézzük, hogy ez több „életben”, és érdekes, a tulajdonságait CSS3! Ráadásul nem rá vonatkozó bármely más JS és JQeury.

Ebben a példában megmutatom, hogyan lehet egy színes és eredeti galéria kizárólag HTML és CSS3 tulajdonságait.

A fő jellemzője a képgalériában növekszik, ha rájuk kattintasz.
Valójában nagyon egyszerű, csak akkor kell használni egy attribútum a HTML és CSS pszeudo egyet.

Igen, az lenne, ha rákattint a képre megnő, szükség van hozzá egy Tabindex tulajdonság, amely bármely egész szám lehet, kezdve nulla. Ezen felül, ha megnyomja a Tab billentyű automatikusan megnő a következő képet.

Az első lépés az, hogy ki a tag maga . Akkor azonnal hozzá az átláthatóság, sima árnyékok, valamint francia:

Most már el kell távolítani a átláthatóság hatása, ha lebeg, és nem akkor, amikor rákattint:

Már csak azt kell tenni a képre, ha rákattint. Ehhez használja ál. De mi. hover. aktív. link itt nyilvánvalóan nem illik. Mert ebben az esetben használható pszeudo: hangsúly. mivel ez úgy működik, ha rákattint a tárgyra, és eltűnik, ha van egy másik kattintással.

Majdnem kész. De most, ha rákattint a képre mellette kialakított egy sárga vonal, mint például a Google Chrome-ot. Ezt könnyen meg lehet szüntetni hozzáadásával tulajdonságainak löket értéke nulla: