Cum de a face css pentru a mări imaginea atunci când treci
Acesta a fost mult timp ceva ce nu am scris mesaje utile despre utilizarea css. Astăzi, doresc să ia în considerare modul de a face css pentru a mări imaginea. Acest lucru se poate face atunci când treceți peste el, precum și o creștere poate avea loc treptat sau brusc. Și toate acestea se poate face în diferite moduri. Dacă sunteți interesat de acest subiect, am sugerăm să citiți cu atenție acest articol și veți învăța cel puțin câteva modalități de a crește imaginea css.
Semifabricatul inițial
Pentru acest articol, am gasit aceasta este o imagine minunata:
In html am pus-o, după cum urmează:
Eu fac doar o parte de manipulare a imaginii. În special, se va bloca și centru, pentru a face mai ușor de a lucra cu ea.
Marja de fluture: 0 auto;
display: block;
>
creștere bruscă simplă
latime hover:: fluture 380px;
>
Rețineți că crește, de asemenea, înălțimea, dar nu în mod dramatic. De asemenea, puteți seta și al doilea parametru - înălțimea, dar atunci puteți rupe proporțiile imaginii.
Creșterea graduală în detrimentul transformării
Acum ne vom uita la o metodă cu totul diferită. În primul rând, redimensionarea se va întâmpla fără probleme. În al doilea rând, în loc de a schimba lățimea, vom folosi transformările - acest CSS3 inovare.
Pentru a permite o tranziție lină, este necesar să se adauge imaginea în sine (nu imaginea pentru a restabili) proprietate de tranziție. Este necesar să se precizeze momentul în care tranziția urmează să fie făcută. Puteți adăuga, de asemenea, alți parametri, dar pe această nu voi locui astăzi.
tranziție fluture: 0.4s;
>
Noi spunem browser-ul că schimbările de stil pentru un element cu fluture de clasă nu ar trebui să apară brusc și întinse în timp de 4 zecimi de secundă. Ok, trebuie să fac foarte transformare atunci când treceți pe imagine:
fluture: hover transformare: scara (1,15, 1,15);
>
Creșterea elementelor se face folosind transformarea proprietății și scara de valori (mărire orizontal, vertical). Astfel, dacă doriți să măriți imaginea proporțional, cele două valori trebuie să fie aceleași. valorile definite în funcție de faptul că 1 - este o dimensiune normală a imaginii.
Prin urmare, în planare de înregistrare de mai sus vom mări imaginea cu 15% pe fiecare parte și este netedă. Iată cum arată:
Nu-i rău, nu-i asa? Astfel, pentru a modifica dimensiunea, puteți utiliza fie lățimea de schimbare sau transformare. Aceste două metode au diferențe. Dacă modificați dimensiunile folosind lățime. crește și se mută de imagine întregul conținut, care este lângă ea. În cazul unor astfel de transformări are loc.
Modificarea dimensiunii de numai o parte
Dacă aveți nevoie pentru a crește planare imagine css numai pe o parte, de asemenea, este mai ușor de a face cu ajutorul unor transformări. Doar scrie acest lucru:
fluture: hover transformare: scaleX (1.2);
>
Aceasta este, după scara de cuvinte cheie specifica explicit coordonate - X sau Y.