Как увеличить картинку при наведении курсора css

Как реализовать увеличение картинки при наведении курсора CSS

Скорее всего, вы сталкивались с таким эффектом как увеличение картинки при наведении курсора при посещении интернет-магазинов. При наведении курсора мыши на разные части изображения товара они отображаются в увеличенном виде.

В этой статье рассказывается о том как реализовать увеличение картинки при наведении курсора CSS и JavaScript без использования библиотеки jQuery.

Обновлено: 2023-06-08 18:17:09 Ангелина Писанюк автор материала

HTML

HTML-код довольно простой: строка разделена на два столбца. Первый из них содержит два изображения, превью которых будет выводиться. Второй содержит div с идентификатором ‘preview’, который будет отображать превью. Оба изображения имеют одинаковую ширину и высоту.

CSS

Для preview div него задан определенный размер, границы и отступы. Свойство background-repeat: no-repeat гарантирует, что фоновое изображение не будет повторяться. margin-left: auto и margin-right: auto выравнивают этот div по центру относительно родительского элемента.

#preview

Для изображений задано свойство display: block , чтобы они не выводились рядом друг с другом. Для родительского div задано свойство text-align: center , чтобы выровнять изображения по центру. При наведении на изображения курсор мыши меняется на иконку лупы с минусом.

В медиа запросе я задал значение display: inline-block , чтобы отображать оба изображения в одной строке, если ширина экрана меньше или равна 767 пикселям.

#preview < margin-top: 10px; border:1px solid black; width:350px; height:500px; background-repeat: no-repeat; margin-left: auto; margin-right: auto; >#samples < text-align: center; >#samples img < margin: 10px; display: block; border: 2px solid #6A6462; >#samples img:hover < cursor: zoom-in; border: 0; -moz-box-shadow:2px 2px 7px 2px rgba(130,130,130,1),-1px -1px 7px 2px rgba(130,130,130,1); -webkit-box-shadow: 2px 2px 7px 2px rgba(130,130,130,.7),-1px -1px 7px 2px rgba(130,130,130,1); box-shadow: 2px 2px 7px 2px rgba(130,130,130,.7),-2px -2px 7px 2px rgba(130,130,130,1); >@media screen and (max-width: 767px) < #samples img < display: inline-block; >>

JavaScript

С помощью JavaScript реализован ключевой код, благодаря которому работает превью. Разделим его написание на шаги.

Шаг 1

Сначала используются функции ‘zoomIn’ и ‘zoomOut ‘, чтобы увеличивать и уменьшать изображения. Данные функции определены в JavaScript. Я подключил к этим двум функциям два события – onmousemove и onmouseout соответственно.

Шаг 2

Начнем с функции zoomOut . Я записал div с id ‘preview’ в переменную pre и установил visibility hidden .

Шаг 3

В функции zoomIn задано visibility visible. Всякий раз, когда курсор мыши перемещается по изображениям, будет виден div с превью. В остальных случаях он будет скрыт.

Условие $(‘#zoom1’).is(‘:hover’) проверяет, находится ли курсор мыши над первым изображением (с идентификатором ‘zoom1’). Если условие истинно (true), то первое изображение устанавливается в качестве фонового изображения для div с id preview. Таким образом, каждый раз, когда вы наводите курсор мыши на первое изображение, div становится видимым с первым изображением в качестве фона. То же самое относится и ко второму изображению.

Как изображение увеличивается в div preview?

Я установил для изображения ширину и высоту 100px и 250px. Но его реальные размеры гораздо больше. Так как я не установил это же ограничение размера для фонового изображения div preview, то оно принимает его полную ширину и высоту. Ширина и высота этого блока меньше ширины фонового изображения. Поэтому оно не полностью покрывает весь div и создает ощущение, будто изображение увеличивается.

function zoomIn(event) < var pre = document.getElementById("preview"); pre.style.visibility = "visible"; if ($('#zoom1').is(':hover')) < var img = document.getElementById("zoom1"); pre.style.backgroundImage = "url('pic1.jpg')"; >if ($(‘#zoom2’).is(‘:hover’)) < var img = document.getElementById("zoom2"); pre.style.backgroundImage = "url('pic2.jpg')"; >> function zoomOut()

Шаг 4

Оператор var posX = event.offsetX присваивает значение координаты X позиции курсора мыши относительно изображения, на котором мышь перемещается в var posX . Аналогично, posY сохраняет значение координаты Y.

Положение фонового изображения div с определяется оператором pre.style.backgroundPosition=(-posX*2.5)+»px «+(-posY*5.5)+»px» .

Я использовал отрицательные значения posX и posY, чтобы фон изображения превью перемещался в направлении, противоположном движению курсора мыши.

Кроме этого, некоторые числа умножаются на posX и posY, чтобы можно было видеть изображение превью полностью при движении курсора.

Ниже представлена полная версия исходного кода анимации.

#preview < margin-top: 10px; border:1px solid black; width:350px; height:500px; background-repeat: no-repeat; margin-left: auto; margin-right: auto; >#samples < text-align: center; >#samples img < margin: 10px; display: block; border: 2px solid #6A6462; >#samples img:hover < cursor: zoom-in; border: 0; -moz-box-shadow:2px 2px 7px 2px rgba(130,130,130,1),-1px -1px 7px 2px rgba(130,130,130,1); -webkit-box-shadow: 2px 2px 7px 2px rgba(130,130,130,.7),-1px -1px 7px 2px rgba(130,130,130,1); box-shadow: 2px 2px 7px 2px rgba(130,130,130,.7),-2px -2px 7px 2px rgba(130,130,130,1); >@media screen and (max-width: 767px) < #samples img < display: inline-block; >>

Как увеличить картинку при наведении?

За изменение масштаба изображения отвечает свойство transform с функцией scale() . В качестве её значения указывается число больше 1 для увеличения масштаба и меньше 1 — для уменьшения масштаба. К примеру, число 1.2 увеличивает масштаб на 20%.

Чтобы картинка увеличивалась при наведении на неё курсора мыши, свойство transform следует привязать к псевдоклассу :hover, как показано в примере 1.

Пример 1. Увеличение картинки

Увеличение изображения

При наведении на картинку масштаб меняется мгновенно, поэтому для плавного увеличения изображения добавлено свойство transition , оно задаёт время масштабирования.

Если требуется масштабировать картинку, не увеличивая при этом её размеры, то каждое изображение надо поместить в . Для него задать свойство display со значением inline-block , чтобы стал размером с изображение; а также overflow со значением hidden , чтобы пряталось всё за пределами (пример 2).

Пример 2. Использование overflow

У изображений внутри строчно-блочных элементов снизу появляется небольшой отступ, его можно убрать с помощью свойства display со значением block .

См. также

:focus на мобильных устройствах
overflow
transform
Анимация ссылок при наведении
Атрибут scroll
Виды ссылок
Всплывающая подсказка
Высота и ширина в CSS
Звёздные войны
Использование :hover
Липкое позиционирование
Несколько псевдоэлементов
Нормальное позиционирование
Ориентация
Очистка float
Переходы с помощью :hover
Повёрнутые рамки
Подробнее о позиционировании
Подсветка строк и колонок таблицы
Псевдокласс :hover
Псевдоклассы в CSS
Работа с типографикой
Селекторы CSS
Состояния кнопок
Сочетание с псевдоклассами
Типы ссылок
Трансформация
Трансформация
Трансформация в CSS
Функции трансформации

html — Увеличение картинки вместе с текстом при наведении

Мне надо, чтобы при наведении на текст или на картинку увеличивалось всё: текст, картинка и задняя серая панель Но сейчас, при наведении на текст, он увеличивается, а картинка пропадает, а при наведении на картинку она просто увеличивается. Я новичок и был бы рад, если вы мне поможете

.hundred-rubliks img < width: 160px; height: 160px; margin-left: 48px; margin-top: 280px; position: absolute; top: 20px; left: 20px; transition: 0.35s; >.hundred-rubliks p < width: 200px; height: 210px; margin-top: 300px; margin-left: 50px; background-color: #7e7e7e; box-shadow: 5px 5px 10px 2px #222; border-radius: 10px; font-size: 20.8px; font-family: "Arial Black"; text-align: center; transition: 0.35s; >.hundred-rubliks :hover

   





100 рубликов

Отслеживать
задан 21 фев 2023 в 13:15
11 7 7 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Я бы реализовал так

.hundred-rubliks < width: 200px; height: 210px; box-shadow: 5px 5px 10px 2px #222; border-radius: 10px; transition: 0.35s; background-image: url(https://dummyimage.com/200x210/ff9900/43455e.jpg&text=Foto); background-repeat: no-repeat; background-size: 50px 50px; background-position: 0 0; display: flex; align-items: flex-end; justify-content: center; background-color: #7e7e7e; >.hundred-rubliks p < font-size: 20.8px; font-family: "Arial Black"; >.hundred-rubliks:hover

 100 рубликов

Отслеживать
ответ дан 21 фев 2023 в 17:41
14.5k 6 6 золотых знаков 35 35 серебряных знаков 71 71 бронзовый знак

А если мне надо, чтобы картинка не была как фон, а был серый фон (как в примере) и картинка на нём отдельно?

21 фев 2023 в 18:48
Так. Глянь ответ
21 фев 2023 в 19:04
Да, так. А можно картинку как-то в центр подвинуть и увеличить размер?
21 фев 2023 в 19:24

background-size: 50px 50px; background-position: 0 0; первое свойство отвечает за размер, второе за положение. В обоих первое значение отвечает за положение по оси X, а второе за ось Y

Как сделать так, чтобы при наведении курсора картинка увеличивалась, но не выходила за границы соседних?

Коллеги, пожалуйста помогите! На сайте должна располагаться матрица из фотографий 3 на 3 и анимация, при наведении курсора на каждую из них, увеличивает слегка. Но при увеличении, увеличивающаяся картинка своими краями залезает на соседние. Как сделать, чтобы она как бы увеличивалась внутри?

#conteiner < position: absolute; margin: 25%; margin-top: 30px; flex-direction: row; >.kar1:hover < transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -moz-transform: scale(1.1); >.kar1

Вопрос задан более трёх лет назад
4192 просмотра

Комментировать
Решения вопроса 2

aliencash

Господи, ну чего тут думать-то? Нужна обертка с overflow: hidden;
Ответ написан более трёх лет назад
Нравится 3 2 комментария
Stels007 @Stels007 Автор вопроса

Спасибо, что откликнулись) Пробовал с overflow: hidden, но не зашло. Скорее всего я не правильно ее применял. Не могли бы Вы подсказать как ее правильно использовать в данном случае?