Админские блоги Юрца

Плавное увеличение картинки на чистом CSS

Условно - все картинки будут плавно увеличиваться при наведении, потом так же плавно уменьшаться. По науке - нужным картинкам нужно задать класс и в CSS так же его прописать.

img {
width: 180px;
 -moz-transition: all 1s ease-out;
 -o-transition: all 1s ease-out;
 -webkit-transition: all 1s ease-out;
 transition: all 1s ease-out;
 }
img:hover{
 -webkit-transform: scale(1.2);
 -moz-transform: scale(1.2);
 -o-transform: scale(1.2);
 transform: scale(1.2);
 }



если scale(1.2); тут поставить значение меньше одного - тогда картинка будет уменьшаться.

Пример:


 


Понравилась статья? Поделитесь с друзьями: