Как да си направим CSS за увеличаване на изображението, когато задържите

Той отдавна е нещо, което аз не съм писал полезни мнения свързани с използването на CSS. Днес искам да помислят как да направят CSS за увеличаване на изображението. Това може да стане, когато мишката върху него, както и увеличение може да се случи много постепенно или рязко. И всичко това може да се направи по различни начини. Ако проявявате интерес към тази тема, предлагам внимателно прочетете тази статия и ще се научите поне няколко начини за увеличаване на изображението в CSS.

Първоначалната празно

За тази статия, открих, че това е един прекрасен образ:

В HTML Сложих го, както следва:

Току-що направи някои манипулации на изображението. По-специално, че ще блокира и център, за да направи по-лесно да се работи с него.

пеперуда марж: 0 автомобил;
езика: блок;
>

Обикновено рязко увеличение

ширина висене:: пеперуда 380px;
>

Имайте предвид, че също така увеличава височината, но тя не драстично. Можете също да зададете и втори параметър - височината, но след това можете да ги разделите на пропорциите на изображението.

Постепенно увеличение за сметка на трансформация

Сега ние ще разгледаме съвсем различен начин. На първо място, да се променят размерите ще стане гладко. На второ място, вместо промяна на ширината, ние използваме трансформациите - това нововъведение CSS3.

За да се даде възможност за плавен преход, е необходимо да се добави самата снимка (не е на снимката, за да се възстанови) преход собственост. Необходимо е да се уточни времето, през което преходът трябва да се направи. Можете да добавите и други параметри, но за това аз няма да се спирам днес.

пеперуда преход: 0.4s;
>

Ние каже на браузъра, че промените в стила на един елемент с пеперуда клас не трябва да се появят внезапно и разтеглени във времето от 4 десети от секундата. Добре, аз трябваше да го направи много трансформация, когато задържите за по-голям:

пеперуда: мишката трансформиране: скала (1.15, 1.15);
>

Увеличаването на елементите се извършва с помощта трансформира имуществото и неговата стойност мащаб (увеличение хоризонтално, вертикално). По този начин, ако искате да увеличите изображението, пропорционално, двете стойности трябва да са едни и същи. Определени стойности на основата на факта, че 1 - това е нормален размер снимка.

Съответно, при изскачащата запис над увеличим изображението до 15% от всяка страна и тя е гладка. Ето как изглежда:

Не е зле, нали? По този начин, за да промените размера, можете да използвате или ширината на промяна или трансформация. Тези два метода имат различия. Ако промените размерите използване ширина. се увеличава изображението и се движи цялото съдържание, което е в непосредствена близост до него. В случай на такива трансформации случи.

Промяна на размера на само едната страна

Ако е необходимо да се увеличи изображението CSS изскачащата само от едната страна, също така е по-лесно да се направи с помощта на трансформации. Просто пиша това:

пеперуда: мишката трансформиране: scaleX (1.2);
>

Това означава, че след като скалата дума изрично уточни координира - Х или Y.