Як зробити в css збільшення картинки при наведенні
Давно щось я не писав корисних постів про використання css. Сьогодні хочу розглянути, як робити в css збільшення картинки. Це можна робити при наведенні на неї, а також саме збільшення може відбуватися плавно або різко. І все це можна робити по-різному. Якщо вам цікава ця тема, пропоную уважно прочитати цю статтю, і ви дізнаєтеся як мінімум кілька способів збільшення картинки в css.
Початкова заготовка
Для нашої статті я знайшов ось таке чудове зображення:
В html я вставив її в такий спосіб: Всі ми, вебмастера і розробники, постійно працюємо з сайтами. Хотів би вам порекомендувати майданчики, якими користуюся сам:
- Reg.ru - тут реєструю і продовжую доменні імена, дуже надійна компанія!
- HostIQ - хостинг преміум якості.
- Ihor - більш бюджетний, але теж дуже якісний хостинг-провайдер.
- Telderi.ru - єдина надійна біржа в рунеті, на якій можна купити готові сайти з доходом!
Я відразу зроблю деякі маніпуляції з картинкою. Зокрема, зроблю її блокової і відцентруйте, щоб було зручніше з нею працювати.
butterfly margin: 0 auto;
display: block;
>
Просте різке збільшення
butterfly: hover width: 380px;
>
Зауважте, що збільшується також і висота, але все це відбувається різко. Ви можете також задати і другий параметр - висоту, але тоді можете порушити пропорції картинки.
Плавне збільшення за рахунок трансформацій
Тепер ми розглянемо абсолютно інший спосіб. По-перше, зміна розмірів буде відбуватися плавно. По-друге, замість зміни ширини ми скористаємося трансформаціями - це нововведення css3.
Щоб активувати плавний перехід, потрібно додати самій картинці (не картинки з наведення) властивість transition. У ньому потрібно вказати час, за яке може бути зроблено перехід. Також можна додати інші параметри, але на цьому я не буду детально зупинятися сьогодні.
butterfly transition: 0.4s;
>
Ми говоримо браузеру, що зміни стилів для елемента з класом butterfly повинні відбуватися не різко, а розтягуватися по часу на 4 десятих секунди. Відмінно, залишилося зробити саму трансформацію при наведенні на картинку:
butterfly: hover transform: scale (1.15, 1.15);
>
Збільшення елементів робиться за допомогою властивості transform і його значення scale (збільшення по горизонталі, по вертикалі). Таким чином, якщо ви хочете пропорційно збільшити зображення, обидва значення повинні бути однаковими. Задавайте значення виходячи з того, що 1 - це нормальний розмір картинки.
Відповідно, в запису вище ми при наведенні збільшуємо картинку на 15% з кожного боку і це відбувається плавно. Ось як це виглядає:
Непогано, так? Таким чином, для зміни розмірів ви можете використовувати або зміна ширини, або трансформацію. У цих двох способів є відмінності. Якщо ви змінюєте розміри за допомогою width. то картинка збільшується і рухає всю інформацію, яку знаходиться біля неї. У випадку з трансформаціями такого не відбувається.
Зміна розміру тільки по одній стороні
Якщо вам потрібно в css збільшити картинку при наведенні тільки по одній стороні, то це також найпростіше зробити за допомогою трансформацій. Просто напишіть так:
butterfly: hover transform: scaleX (1.2);
>
Тобто після ключового слова scale явно вказуємо координату - X або Y.