Hogyan készítsünk css, hogy növelje a kép, ha lebeg

Régóta valami nem írtam hasznos hozzászólás CSS segítségével. Ma azt szeretné, hogy hogyan lehet a css, hogy növelje a képet. Ezt meg lehet tenni, ha lebeg felette, valamint a növekedés során igen fokozatosan vagy hirtelen. És mindez lehet tenni a különböző módon. Ha érdekli ez a téma, azt javaslom, olvassa el figyelmesen ezt a cikket, és megtudhatja, legalább néhány módja, hogy növelje a kép css.

A kezdeti blank

Ehhez a cikkhez, ezt találtam egy csodálatos kép:

A html tettem az alábbiak szerint:

Csak némi manipuláció a képet. Különösen akkor blokkolja és a központ, hogy könnyebb vele dolgozni.

pillangó margin: 0 auto;
display: block;
>

Egyszerű megugrott

pillangó: hover szélesség: 380px;
>

Figyeljük meg, hogy növeli a magasságát, de ez nem drámai. Azt is beállíthatja, a második paraméter - a magasság, de akkor majd megtöri a kép arányait.

Fokozatos növekedés rovására átalakulás

Most nézzük meg egy teljesen más módszerrel. Először is, az átméretezés fog történni simán. Másodszor, megváltoztatása helyett a szélessége, akkor használja a transzformációk - ez az innováció css3.

Annak érdekében, hogy a zökkenőmentes átmenetet, szükség van hozzá a képet (nem a kép helyreállítása) átmeneti tulajdon. Meg kell határozni, hogy az idő, ameddig az átmenet kell tenni. Azt is hozzá más paramétereket, de ezen nem fogok lakni ma.

pillangó átmenet: 0.4s;
>

Elmondjuk a böngészőnek, hogy a stílus változik egy elem az osztály pillangó nem fordulhat elő hirtelen és feszített időben 4 tizedmásodperc. Ok, azt kell tennie, nagyon transzformáció, ha lebeg a képre:

pillangó: lebeg transzformáció: skála (1,15, 1,15);
>

Növelése elemek segítségével történik átalakítás tulajdonság és érték skála (nagyítás vízszintesen, függőlegesen). Így, ha ki szeretne nagyítani a képet arányosan, a két érték azonosnak kell lennie. A meghatározott értékeket azon a tényen alapul, hogy az 1 - ez egy normális kép méretét.

Ennek megfelelően a felvételi hover fenti növeljük a kép 15% mindkét oldalon, és ez sima. Itt van, hogyan néz ki:

Nem rossz, mi? Így, hogy változtatni a méretét, akkor sem a szélessége változás vagy átalakulás. Ez a két módszer van különbség. Ha megváltoztatja a méreteket szélességét. A kép növekszik, és mozog minden, a tartalom, ami mellette. Abban az esetben, az ilyen átalakítások bekövetkezik.

Méretének változtatása csak az egyik oldalon

Ha meg kell növelni a kép CSS hover csak az egyik oldalon, ez is könnyebb segítségével átalakításokat. Csak írom ezt:

pillangó: lebeg transzformáció: scaleX (1.2);
>

Azaz, a kulcsszó után skála határozza meg kifejezetten a koordináta - X vagy Y.