A legegyszerűbb módja annak, hogy egy albumba értelemben xozblog - tanulságok és cikkek weboldal, blog

Szia, kedves olvasók XoZblog egy! Sok, bár valószínűleg minden területen van egy plugin, hogy hozzon létre egy albumba hatása, azaz, ha a kép megnyílik teljes méretben, és a többi tartalom megzavarja. Használata CSS3 egyszerűsítheti a teremtés ilyen hatás. Ebben a cikkben, a hatás valósul miatt ál-osztály: a célt.

Kezdeni, szükségünk van egy miniatűr, egy külön képet egy kisebb méretű, vagy játszanak a szélessége a fő kép. Körülveszi a miniatűr link.

Most egy újabb sor kódot. Itt ugyanaz a kép, de az eredeti méretet is körül kötés, melynek id attribútum értéke megegyezik az érték href attribútum hivatkozás fent. És ott pressbox osztályban.

Itt maguk CSS3 végrehajtására vonatkozó szabályokat a gyűjtőbe hatást.

pressbox # 123;
szélessége. 0;
magasságot. 0;
helyzetbe. rögzített;
túlcsordulás. rejtett;
maradt. 0;
tetején. 0;
/ * A tetején az összes többi elem * /
z-index. 9999;
text-align. központ;
/ * * A félig átlátszó szürke háttér /
háttérben. RGBA # 40; 0. 0. 0. 0,7 # 41; ;
# 125;

pressbox img # 123;
/ * Kezdetben teljesen átlátszó kép * /
fényelnyelés. 0;
padding. 10px;
háttérben. #ffffff;
margin-top. 100px;
/ * * Shade /
-WebKit-box-árnyék. 0px 0px 15px # 444;
-moz-box-árnyék. 0px 0px 15px # 444;
box-árnyék. 0px 0px 15px # 444;
/ * Az átláthatóság az ingatlan nem változik azonnal egy negyed másodperc * /
-moz-átmenet. fedőképesség .25s könnyű ki-be;
-WebKit-átmenet. fedőképesség .25s könnyű ki-be;
átmenet. fedőképesség .25s könnyű ki-be;
# 125;

pressbox. célpont # 123;
szélessége. auto;
magasságot. auto;
alján. 0;
jobbra. 0;
# 125;

pressbox. target img # 123;
fényelnyelés. 1;
# 125;

Ja, ne felejtsük el, hogy csak akkor működik:

Ahhoz, hogy naprakész friss cikkek és a levont feliratkozás VKontakte oldalra, vagy hozzáadni a köröket a Google+. Köszönjük!