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

08.04.2016

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


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

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

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

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

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

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

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

Добавить комментарий

Ваш e-mail не будет опубликован.