Плавное увеличение изображения при наведении на чистом CSS3

Этот метод я применил у себя в блоге. Когда пользователь наводит на миниатюру любой записи, она у него плавно увеличивается. Вроде ничего сложного, а смотрится уже интереснее. Делается это все на чистом CSS3 и довольно просто. Вы можете увидеть этот эффект на этом сайте, на главной странице.

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

Для начала, нам нужно подготовить простую разметку в html для наших картинок.

<div>
  <img src="http://miriadna.com/desctopwalls/images/max/Yellow-sunset-and-fog.jpg" class="transform"/>
</div>
<div>
  <img src="http://cdn.mntm.me/0b/71/58/Maroon_Bells-Aspen-Colorado-0b7158fa70b14b94a4445861d168b7e5.jpg" class="transform"/>
</div>
<div>
  <img src="https://pic.rutube.ru/video/96/73/967380b388074c00b1dcd0d5aba34324.jpg?size=l" class="transform"/>
</div>

Нужно теперь нашим div’ам и картинкам задать стиль:

div{
  width:520px;
  height:280px;
  border: 3px solid grey;
  overflow:hidden;
  margin:5px;
}
img{
  width:520px;
  height:280px;
}

Мы создали обычный блок, размером 520 x 280 пикселей. Размер блока и размер изображения должны совпадать. Если ваша картинка больше или меньше блока, то его нужно подогнать под размер картинки. И обязательно, мы добавили для блока правило overflow:hidden;. Оно нужно для того, что бы когда наше изображение увеличивалось, оно не выходило за рамки.
Теперь зададим правила для изображения через класс transform(Вы можете назвать свой класс как угодно).

.transform{
   transition: all 1s ease-out;
}
.transform:hover{
   transform: scale(1.2);
}

Анимация происходит с помощью параметров transition и transform в CSS3. На всю анимацию у нас уходит одна секунда. Если вы хотите сделать что бы ваша картинка увеличивалась быстрее или медленнее, то вам нужно изменить значение времени, в зависимости от того, что вам надо.

Пример

В примере картинка увеличивается 1.2 раза. Вы можете его менять, в зависимости от того, что вам надо.

Я надеюсь вам помогла эта запись.
Удачи.

Оставьте ответ

comment-avatar

*