Sima nagyítás amikor mutató tiszta css3

Ezt a technikát használom képekkel a saját blog. Amikor a felhasználó mozgatja az áttekintő minden rekordot növeli zökkenőmentesen. Elfogadom, nem elég rossz, és jól néz ki.

És ez történik csak a segítségével CSS3, és nagyon egyszerű. Most elmondom, hogyan kell csinálni.

Hogyan működik láthatjuk a demo, és van egy blog a főoldalon.

Először is fel kell készíteni nem bonyolult HTML jelölés a képeket, ebben az esetben azt kell 3.

Mint látható, hogy az összes kép a kép osztály, amelyre mi, sőt, akkor állítsa be a paramétereket.

De a megjelenés stílusok:

Létrehoztunk egy alapértelmezett blokk mérete 380 x 250 pixel. Ez a blokk legyen az azonos méretű, mint a kép (ebben az esetben 380-250). Ennek megfelelően, ha a kép lesz nagyobb vagy kisebb, a méret a blokk .image csinál akkora, mint a kép.

És biztos, hogy a szabály overflow: hidden; Szükséges annak biztosítása, hogy a kép nem túlmutatnak a blokk a növekedés.

Most kérés szabályait a képek maguk:

Az animáció történik átmenet paraméter és átalakulni CSS3. Az egész animáció töltünk egy pillanatra. Ha szeretné, hogy a kép gyorsan növekszik, csökkenteni ezt az értéket.

A demo kép nőtt 1,1-szer. Ha tesz egy 2 érték, a kép megduplázódik, és így tovább.

Ez minden, emberek. Ahogy ígértem, a lecke nagyon egyszerű. Remélem tetszik ez az egyszerű hatást képeket. Hamarosan találkozunk.