Плавное увеличение изображения при наведении CSS
Блог
Делимся с Вами своими знаниями и новостями

#Cruelten » Блог » Web » Плавное увеличение изображения при наведении CSS

16.04.2017

Плавное увеличение изображения при наведении CSS

Увеличение изображения при наведении CSS

Плавное увеличение изображения при наведении CSS очень востребованный hover (ховер) эффект в наши дни. В этой статье мы разберемся, как его добиться.

На самом деле это очень и очень простой эффект и если Вы хотя бы немного знакомы с CSS, то, наверное, посчитаете мою статью совершенно глупой, но, я также знаю, что много людей без понятия как добиться эффекта увеличения изображения при наведении мышкой на него, поэтому данная статья для них.

Итак. Первое, что мы должны сделать это поместить наш тег <img> в контейнер, которому обязательно задаем размеры и свойства overflow: hidden. Привожу пример кода.

<div class="imagemy">
<img src="здесь адрес изображения">
</div>

 Увеличение изображения при наведении CSS

.imagemy {
 overflow:hidden;
 }
 .imagemy img {
 -moz-transition: all 1s ease-out;
 -o-transition: all 1s ease-out;
 -webkit-transition: all 1s ease-out;
 }
.imagemy img:hover{
 -webkit-transform: scale(1.1);
 -moz-transform: scale(1.1);
 -o-transform: scale(1.1);
 }

Собственно и все, дорогие мои подписчики. Я Вам привел пример, как все это дело будет работать с помощью свойств transition и transform. Приятной работы: не забывайте ставить лайк моей странице в Facebook, чтобы быть всегда в курсе о новых интересных фишках в веб-программировании, а также задавать вопросы, если имеются под этой статьей. Всем спасибо, пока!

Метки:

Свяжитесь с нами уже сейчас

Вы привыкли видеть здесь форму обратной связи. Ведь так? Ее делают почти все. Но исследуя поведение людей, мы пришли к выводу, что форма совершенно не нужна. В любом случае все сводится к обсуждению Вашего проекта в WhatsApp или Telegram. А зачем нам тратить Ваше время на заполнение различных форм? Поэтому, пишите в Telegram или в WhatsApp.