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: Mindannyian, webmesterek és a fejlesztők folyamatosan dolgoznak a telek. Szeretném, ha ajánlani a helyszínen, hogy élvezi magát:
- Reg.ru - rögzíti, és meghosszabbítja domain nevek, egy nagyon megbízható cég!
- HostIQ - tárhely prémium minőségű.
- Ihor - több költségvetési, hanem nagyon magas színvonalú internetes tárhely szolgáltató.
- Telderi.ru - az egyetlen megbízható csere RuNet, ahol lehet kapni kész weboldalak bevételt!
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.