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

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

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

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

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

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

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

Пример

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

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

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

comment-avatar

*