- Увеличение изображения при наведении курсора CSS
- Как увеличить картинку при наведении?
- См. также
- Как реализовать увеличение картинки при наведении курсора CSS
- HTML
- CSS
- JavaScript
- Шаг 1
- Шаг 2
- Шаг 3
- Как изображение увеличивается в div preview?
- Шаг 4
- Как сделать плавное увеличение картинки при наведении — эффект на чистом CSS
Увеличение изображения при наведении курсора CSS
Увеличение изображения при наведении курсора посредством CSS, при чем плавно, красиво — задача совсем не сложная. Такой метод с изображениями используют многие блогеры. Когда посетитель вашего ресурса наводит курсор на изображение любой записи, это изображение плавно увеличивается. Такой эффект смотрится очень красиво.
Увеличение изображения при наведении курсора создается при помощи двух свойств CSS, свойства «transition», которое устанавливает эффект перехода между двумя состояниями элемента, и свойства «transform», которое меняет размер элемента.
Как работает эффект — увеличение изображения при наведении курсора, смотрите в демо-примере^
Сейчас рассмотрим как это сделать.
Первым делом размещаем картинку в папке с изображениями (обычно это папка «images»). Далее вставляем его в необходимое место на странице, предварительно обернув в div с классом img-increase. Укажите правильный путь к вашему изображению.
Далее в файле CSS прописываем нашему классу img-increase необходимые свойства.
То есть наш блок будет иметь размеры 800 на 550 пикселей, точно такие-же, как и наше изображение. Если ваша картинка другого размера, устанавливаете размеры блока соответственно вашему изображению.
Свойство «overflow:hidden;» необходимо для того, чтобы наше изображение не выходило за рамки блока при увеличении.
Далее прописываем стили css для самого изображения:
.img-increase img < transition: all 1s ease-out; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; -webkit-transition: all 1s ease-out; >.img-increase img:hover
В свойстве «transition» у нас установлено «1s» — это значит, что анимация у нас происходит за 1 секунду. Это значение можно уменьшить или увеличить.
В свойстве «transform» установлено 1.3 — картинка увеличивается 1.3 раза. Соответственно это значение так-же можно изменить.
На этом все. Если материал понравился, поделитесь им с друзьями, кликнув по кнопкам соц.сетей ниже. Всем Удачи!
Как увеличить картинку при наведении?
За изменение масштаба изображения отвечает свойство 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
- Анимация ссылок при наведении
- Виды ссылок
- Всплывающая подсказка
- Высота и ширина в CSS
- Использование :hover
- Липкое позиционирование
- Несколько псевдоэлементов
- Нормальное позиционирование
- Очистка float
- Переходы с помощью :hover
- Повёрнутые рамки
- Подробнее о позиционировании
- Подсветка строк и колонок таблицы
- Псевдокласс :hover
- Псевдоклассы в CSS
- Работа с типографикой
- Селекторы CSS
- Состояния кнопок
- Сочетание с псевдоклассами
- Типы ссылок
- Трансформация
- Трансформация
- Трансформация в CSS
- Функции трансформации
Как реализовать увеличение картинки при наведении курсора CSS
Скорее всего, вы сталкивались с таким эффектом как увеличение картинки при наведении курсора при посещении интернет-магазинов. При наведении курсора мыши на разные части изображения товара они отображаются в увеличенном виде.
В этой статье рассказывается о том как реализовать увеличение картинки при наведении курсора CSS и JavaScript без использования библиотеки jQuery.
HTML
HTML-код довольно простой: строка разделена на два столбца. Первый из них содержит два изображения, превью которых будет выводиться. Второй содержит div с идентификатором ‘preview’, который будет отображать превью. Оба изображения имеют одинаковую ширину и высоту.
CSS
Для preview div него задан определенный размер, границы и отступы. Свойство background-repeat: no-repeat гарантирует, что фоновое изображение не будет повторяться. margin-left: auto и margin-right: auto выравнивают этот div по центру относительно родительского элемента.
Для изображений задано свойство 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; >>
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')"; >var posX = event.offsetX; var posY = event.offsetY; pre.style.backgroundPosition=(-posX*2.5)+»px «+(-posY*5.5)+»px»; > function zoomOut()
Как сделать плавное увеличение картинки при наведении — эффект на чистом CSS
Прочитав эту статью, вы узнаете, как сделать так, чтобы при наведении мышки, изображение плавно увеличивалось. И не просто увеличивалось в размерах, а чтобы создавался эффект зума.
Мы будем использовать только html и css. JavaScript нам не понадобится.
Итак, напишем немного html кода. Мы поместим нашу картинку img в блок с классом photo
Здесь я не добавляю какие-либо дополнительные классы к картинке, чтобы не запутывать вас при объяснении. Но на своем проекте, лучше будет, если вы тегу img добавите какой-то свой класс и будете обращаться к картинке по этому классу.
Далее перейдем к css. С помощью hover мы сможем менять значения у свойств.
В данном случае, мы увеличим картинку, изменив для нее свойство transform. Запишем это в коде:
Здесь мы прописали следующую инструкцию: при наведении (hover) на блок, в котором содержится картинка (класс photo), мы меняем значение transform у самой картинки (img).
Значение scale — это на сколько мы масштабируем картинку. По умолчанию идет значение 1.
Чтобы добавить немного плавности переходу, добавим свойство transition для тега img
Здесь мы указали, какое свойство будем меняться и сколько будет длиться переход.
Теперь картинка у нас увеличивается плавно, но она выходит за пределы свой условной рамки. Чтобы это исправить, нам нужно добавить к блоку photo свойство overflow со значением hidden
Мы, как бы, говорим: все что выходит за пределы этого блока — скрываем.
Но это еще не все, ведь браузер не знает, какой размер у нашего блока — поэтому нам нужно его задать. А для картинки прописать, чтобы она занимала всю ширину и высоту блока photo.
В итоге получится вот такой код:
Надеюсь вы поняли принцип, по которому можно делать увеличение картинки при ховере. Я прикреплю наше видео, где еще раз подробно все объясняю.