No Image

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

1 просмотров
11 марта 2020

В статье подробно описаны способы увеличения изображения при наведении курсора мыши. Представлены несколько вариантов.

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

Вы наводите курсор мышки на картинку, а она плавно увеличивается в размере. На странице сайта это выглядит эффектно.

Скрипт Jquery Image Magnify v1.11 позволяет увеличивать любое изображение на странице до требуемой величины.

Этот скрипт позволяет просматривать увеличенную часть любого изображения при наведении курсора мыши.

Simple Image Panner and Zoomer позволяет с целью экономии места осуществить показ изображений или фотографий, занимающих относительно больш́ую площадь экрана монитора компьютера, в окне с гораздо меньшими, ограниченными по вашему выбору, размерами.

Image Power Zoomer позволяет более детально рассмотреть интересующее изображение с помощью эффекта увеличительного стекла.

С помощью CSS и HTML-кода при наведении курсора мыши на миниатюру происходит её увеличение и показ в новом окне. Такое же действие происходит и при наведении мыши на ссылку в предложении.

Этот приём с картинками я использую у себя на блоге. Когда пользователь наводит на миниатюру любой записи она плавно увеличивается. Согласитесь, довольно не плохо и красиво смотрится.

И делается это только с помощью CSS3, и довольно таки просто. Сейчас я Вам расскажу как это делать.

Как это работает Вы можете посмотреть в демо и у меня на блоге на главной странице.

Для начала нам нужно подготовить не сложную разметку html для наших картинок, в данном случае у нас их будет 3.

Как видите, что все картинки имеют класс image к которому мы, собственно, и будем задавать параметры.

Читайте также:  Dsr плавность nvidia что это

А вот как выглядят стили:

Мы создали обычный блок размером 380 на 250 пикселей. Это блок должен быть такого же размера как и изображение (в нашем случае 380 на 250). Соответственно, если у Вас картинка будет большего или меньшего размера, размер блока .image делаем такого же размера как и картинка.

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

Теперь задаём правила для самих изображений:

Анимация происходит с помощью параметра transition и transform в CSS3. На всю анимацию у нас уходит одна секунда. Если Вы хотите, чтобы картинка быстрее увеличивалась, уменьшите это значение.

В демо картинка увеличивается 1.1 раза. Если поставить значение 2, то картинка увеличится в два раза и так далее.

Вот и всё, друзья. Как и обещал, что урок будет очень простым. Надеюсь Вам понравился этот простой эффект для картинок. До скорых встреч.

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

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

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

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

Если требуется масштабировать картинку, не увеличивая при этом её размеры, то каждое изображение надо поместить в

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

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

Комментировать
1 просмотров
Комментариев нет, будьте первым кто его оставит

Это интересно
No Image Компьютеры
0 комментариев
No Image Компьютеры
0 комментариев
No Image Компьютеры
0 комментариев
No Image Компьютеры
0 комментариев
Adblock detector