Плавное увеличение изображения при наведении 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, чтобы быть всегда в курсе о новых интересных фишках в веб-программировании, а также задавать вопросы, если имеются под этой статьей. Всем спасибо, пока!