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

08.04.2016

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

Первый способ увеличения картинки при наведении

[button title=»DEMO» icon=»» icon_position=»» link=»/blog/html/zoom.html» target=»_blank» color=»» font_color=»» size=»2″ full_width=»» class=»» download=»» onclick=»»]

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

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

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

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

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

Второй способ увеличения изображения на CSS

Давайте посмотрим пример данной фишки. Наведите курсор на изображение

Для начала нам надо картинку заключить в блок div со стилем, например:

Далее добавляем для стиля test_css_image_zoom такое:

Ширина, высота блока фиксируется. Это делать обязательно, иначе картинка при зуме будет двигать весь контент страницы.

Далее задаем css параметры для картинки в нутрии div:

Теперь делаем hover (при наведении) на картинку:

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

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

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

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