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

Плавное увеличение изображения при наведении CSS

Довольно частая практика на современных сайтах — плавное увеличение блока с изображением. Как же это сделать с помощью CSS?

Плавное увеличение изображения при наведении курсора CSS

Делим решение задачи на два этапа: разметка html и стили css. Для начала разметим блоки с изображениями внутри:

Всем блокам присвоили класс box. Одним из важных его свойств будет overflow:hidden, то есть скрыть всё, выходящее за рамки блока. Будем же увеличивать изображение? Да. Но видима будет только часть, ограниченная блоком.
Это мы разобрали. Переходим к описанию стилей.

Всё как и оговаривали — квадратные блоки, схожие по размеру со стандартным, не увеличенным изображением, то тоже 250 на 250.
Свойство overflow:hidden как и говорилось ранее, не позволить выходить за рамки блока при увеличении.
Свойства касающиеся изображений:

Тут без CSS3 никуда. Все современные браузеры анимацию отобразят. Нужны параметры transition и transform. Время на анимацию выставляем 1 секунду (1s). Увеличение будет происходить в 1.2 раза. Вы можете изменить на Ваш вкус.
Теперь к примеру работы!

Плавное увеличение изображения при наведении на чистом CSS3

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

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

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

Плавное увеличение картинки при наведении только на CSS3.

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

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

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

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

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

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

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

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

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

Увеличение изображения при наведении курсора CSS

Увеличение изображения при наведении курсора посредством CSS, при чем плавно, красиво — задача совсем не сложная. Такой метод с изображениями используют многие блогеры. Когда посетитель вашего ресурса наводит курсор на изображение любой записи, это изображение плавно увеличивается. Такой эффект смотрится очень красиво.

Увеличение изображения при наведении курсора создается при помощи двух свойств CSS, свойства «transition», которое устанавливает эффект перехода между двумя состояниями элемента, и свойства «transform», которое меняет размер элемента.

Как работает эффект — увеличение изображения при наведении курсора, смотрите в демо-примере^

Сейчас рассмотрим как это сделать.

Первым делом размещаем картинку в папке с изображениями (обычно это папка «images»). Далее вставляем его в необходимое место на странице, предварительно обернув в div с классом img-increase. Укажите правильный путь к вашему изображению.

Html

Далее в файле CSS прописываем нашему классу img-increase необходимые свойства.

CSS

То есть наш блок будет иметь размеры 800 на 550 пикселей, точно такие-же, как и наше изображение. Если ваша картинка другого размера, устанавливаете размеры блока соответственно вашему изображению.

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

Далее прописываем стили css для самого изображения:

В свойстве «transition» у нас установлено «1s» — это значит, что анимация у нас происходит за 1 секунду. Это значение можно уменьшить или увеличить.

В свойстве «transform» установлено 1.3 — картинка увеличивается 1.3 раза. Соответственно это значение так-же можно изменить.

На этом все. Если материал понравился, поделитесь им с друзьями, кликнув по кнопкам соц.сетей ниже. Всем Удачи!

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

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