Эффект приближения (зум) на CSS для картинок

08.04.2016

Здравствуйте. Сегодня мы поговорим об эффекте приближения (зума) на CSS для изображений.


Припустим у нас есть картинка, вставляем HTML код:

Наши картинки имеют класс image к которому мы и будем задавать стили:

Создаем блок размером 380 на 250 пикселей. Наш блок будет идентичного размера как и изображение 380px на 250px . Стоит учесть, что для корректного увеличения картинки, ваше изображение должно быть точного размера с блоком (подгоняем эти размеры), иначе будет некрасиво.

Так же не забываем за overflow:hidden; . Это нужно для того, чтобы когда изображение зумируется, оно не выходило за наш блок.

Далее задаем стили для изображений:

Готово, теперь вы с легкостью сможете стилизировать свои картинки.

 

Обратите внимание, что свойство transition работает только в Chrome, Safari, Opera 10.5+, Firefox 4+

 

гггг

гггг

Відповіcти
Анонім

Бомба

Відповіcти
Анонім

коммент из 11 сентября 2001 года

Відповіcти

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься.