Закрыть ... [X]
Закрыть ... [X]

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

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

DEMO

Припустим у нас есть картинка, вставляем 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+


Источник: https://di-grand.com/blog/css/2427-effekt-priblizheniya-zum-na-css-dlya-kartinok.html


Поделись с друзьями



Рекомендуем посмотреть ещё:



Похожие новости


Как сделать пиццу быстро и без теста
Как сделать самой домик для кукол
Как лечит в домашних условиях когда болит копчик
Пеналы фото сделать своими руками
Сделать своими руками в домашних условиях из бумаги
Шкафы и тумбы своими руками


Как сделать картинку увеличивающейся при наведении
Как сделать картинку увеличивающейся при наведении


Как сделать в css увеличение картинки при наведении на нее?
Как увеличить изображения на сайте через JavaScript и CSS (зуммирование)



ШОКИРУЮЩИЕ НОВОСТИ