Как сделать при наведении на картинку hover эффект

Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?

Заменить одну картинку на другую при наведении на неё курсора мыши.

Решение

Смена одной картинки на другую при наведении на неё курсора мыши называется эффектом перекатывания. Обычно для создания эффекта перекатывания применяется JavaScript, но в большинстве случаев вполне достаточно и CSS.

Псевдокласс :hover

Вначале разберём, как делается собственно сам эффект. Для этой цели используется псевдокласс :hover , он добавляется к желаемому селектору. Этот псевдокласс определяет стиль элемента, когда на него наводится курсор мыши, что нам как раз и требуется. Сразу отметим, что в браузере Internet Explorer версии 6 и ниже :hover работает только со ссылками, тогда как другие браузеры понимают :hover и для других элементов. Так что для универсальности придётся помещать изображение внутрь контейнера . Сам рисунок добавляется и меняется с помощью стилевого свойства background . Алгоритм действий следующий.

1. Готовятся два изображения одинакового размера, одно для исходного вида, а второе — для его замены при эффекте перекатывания.
2. Исходная картинка добавляется в качестве фонового рисунка к селектору A через стилевое свойство background со значением url(URI) , здесь URI — путь к графическому файлу.
3. Присоединяем псевдокласс к селектору A и снова включаем свойство background , но в качестве значения указываем замещающее изображение.
4. Чтобы ссылка была по размеру картинки, её следует превратить в блочный элемент с помощью свойства display со значением block , а также задать высоту и ширину ссылки.

На рис. 1 приведены два изображения: исходное (рис. 1а) и замещающее (рис. 1б).

а б

Рис. 1. Картинки для создания эффекта перекатывания

Остаётся собрать весь код воедино, как показано в примере 1. Чтобы ссылка не вела на какой-то определенный файл, что в данном случае излишне, добавим «заглушку» в виде символа решетки (#) к атрибуту href тега .

Пример 1. Использование псевдокласса :hover

HTML5 CSS 2.1 IE Cr Op Sa Fx

Приведённый способ хотя и прост в реализации, но имеет определённый недостаток. Поскольку второй рисунок загружается только при наведении курсора на ссылку, то отображение картинки происходит с некоторой паузой. Для устранения этой задержки можно использовать не два изображения, а лишь одно.

Эффект перекатывания с одним рисунком

Казалось бы имеется противоречие, ведь эффект перекатывания состоит в замене одного рисунка на другой, как же тогда обойтись одной картинкой? На самом деле изображений будет два (рис. 2), но храниться они будут в одном графическом файле.

Рис. 2. Изображение с двумя картинками

Смена одного рисунка на другой происходит сдвигом изображения по вертикали за счёт использования универсального свойства background или background-position , как показано в примере 2.

Пример 2. Изменение положения рисунка

HTML5 CSS 2.1 IE Cr Op Sa Fx

Для селектора A устанавливается фоновое изображение через свойство background , ширина ( width ) совпадает с рисунком, а высота (свойство height ) равна половине высоты изображения. В итоге первоначально должна отображаться зеленая вкладка целиком.

При наведении на ссылку фон смещается вверх на половину высоты картинки (40 пикселов) с помощью background-position и становится видна оранжевая вкладка.

Эффекты при наведении на картинку CSS

Подборка Hover эффектов при наведении на картинку CSS. Здесь вы найдете эффекты для галереи, эффекты с появлением текста или иконок, рамки и многие другие интересные эффекты для сайта.

Красивое вращение картинки при наведении CSS

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

Пример

HTML

CSS

 .beauty-rotate < width: 300px; height: 300px; border: 4px double #bd6c46; /* Рамка */ overflow: hidden; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; >.beauty-rotate:hover

Разворот картинки при наведении CSS

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

Пример

HTML

CSS

 /* Блок картинки */ .rotate-block < width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; >/* Изображение */ .change-img < width: 300px; height: 300px; position: relative; perspective: 1000px; border: 1px solid #d68360; /* Рамка */ >.change-img:hover .front-side-img < transform: rotateY(180deg); >.change-img:hover .back-side-img < transform: rotateY(360deg); >/* Стороны изображения */ .front-side-img, .back-side-img < position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transition: 1s; back-side-imgface-visibility: hidden; >.front-side-img img < max-width: 100%; min-width: 100%; height: auto; >.back-side-img img < max-width: 100%; min-width: 100%; height: auto; transform: scaleX(-1);/* Отражаем изображение по горизонтали */ >.back-side-img

Поворот картинки при наведении CSS

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

Пример

HTML

CSS

 img.small-rotate < -webkit-transition: all 1s ease; transition: all 1s ease; >img.small-rotate:hover < -webkit-transform: rotate(15deg); /* Градусы поворота можно изменить по необходимости */ transform: rotate(15deg); /* Градусы поворота можно изменить по необходимости */ >

Вращение картинки при наведении CSS

С помощью этого эффекта можно вращать картинку при наведении, для этого используем свойство transform. Градусы поворота можно изменить по необходимости.

Пример

HTML

CSS

 img.rotate-img < border-radius: 50%; -webkit-transition: -webkit-transform .8s ease-in-out; transition: transform .8s ease-in-out; >img.rotate-img:hover < -webkit-transform: rotate(360deg); /* Градусы поворота можно изменить по необходимости */ transform: rotate(360deg); /* Градусы поворота можно изменить по необходимости */ >

Рамка внутри блока или картинки при наведении

Чтобы рамка появлялась внутри блока или картинки можно использовать свойство outline-offset. С помощью него можно задать расстояние от края элемента до рамки. Отрицательное значение отображает рамку внутри элемента, положительное — вокруг элемента.

Пример

HTML

CSS

 img:hover < outline: 2px dashed #3d1f15; /* Ширина, вид и цвет рамки */ outline-offset: -10px; /* Выводим рамку внутри элемента */ >

Рамка к изображению при наведении

Такая рамка может пригодиться в галерее, а так же если нужно выделить то или иное изображение при наведении. Рамка вокруг изображений делается с помощью свойства border, которое добавляется к селектору img. Чтобы рамка появлялась только при наведении курсора мыши на картинку, следует воспользоваться псевдоклассом :hover.

Пример

HTML

CSS

 img:hover < border: 3px solid #413f3f; /* Ширина, вид и цвет рамки */ >

Эффект при наведении на картинку с текстом CSS

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

Пример

HTML

CSS 1

 /* Общие стили */ *, *:after, *:before < border-box; box-sizing: border-box; >.clearfix:before, .clearfix:after < content: ''; display: table; >.clearfix:after < clear: both; >.hover-text-one < overflow: hidden; margin: 0; width: 100%; list-style: none; text-align: center; >.hover-text-one figure < position: relative; z-index: 1; display: inline-block; overflow: hidden; background: #527c82; text-align: center; cursor: pointer; >.hover-text-one figure img < position: relative; display: block; min-height: 100%; opacity: 0.8; >.hover-text-one figure figcaption < padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; >.hover-text-one figure figcaption::before, .hover-text-one figure figcaption::after < pointer-events: none; >.hover-text-one figure figcaption < position: absolute; top: 0; left: 0; width: 100%; height: 100%; >.hover-text-one figure h3 < word-spacing: -0.15em; font-weight: 300; >.hover-text-one figure h3 span < font-weight: 800; >.hover-text-one figure h3, .hover-text-one figure p < margin: 0; >.hover-text-one figure p < letter-spacing: 1px; font-size: 68.5%; >/* Эффект при наведении */ figure.effect-text-three < background: #527c82; >figure.effect-text-three img < width: -webkit-calc(100% + 20px); width: calc(100% + 20px); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transform: scale(1.1); -webkit-backface-visibility: hidden; backface-visibility: hidden; >figure.effect-text-three:hover img < opacity: 0.4; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); >figure.effect-text-three figcaption < text-align: left; >figure.effect-text-three h3 < position: relative; overflow: hidden; padding: 0.5em 0; >figure.effect-text-three h3::after < position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #fff; content: ''; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0); >figure.effect-text-three:hover h3::after < -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); >figure.effect-text-three p < padding: 1em 0; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: translate3d(100%,0,0); transform: translate3d(100%,0,0); >figure.effect-text-three:hover p

CSS 2

 /* Общие стили */ *, *:after, *:before < border-box; box-sizing: border-box; >.clearfix:before, .clearfix:after < content: ''; display: table; >.clearfix:after < clear: both; >.hover-text-one < overflow: hidden; margin: 0; width: 100%; list-style: none; text-align: center; >.hover-text-one figure < position: relative; z-index: 1; display: inline-block; overflow: hidden; background: #527c82; text-align: center; cursor: pointer; >.hover-text-one figure img < position: relative; display: block; min-height: 100%; opacity: 0.8; >.hover-text-one figure figcaption < padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; >.hover-text-one figure figcaption::before, .hover-text-one figure figcaption::after < pointer-events: none; >.hover-text-one figure figcaption < position: absolute; top: 0; left: 0; width: 100%; height: 100%; >.hover-text-one figure h3 < word-spacing: -0.15em; font-weight: 300; >.hover-text-one figure h3 span < font-weight: 800; >.hover-text-one figure h3, .hover-text-one figure p < margin: 0; >.hover-text-one figure p < letter-spacing: 1px; font-size: 68.5%; >/* Эффект при наведении */ figure.effect-text-four figcaption < text-align: right; >figure.effect-text-four h3, figure.effect-text-four p < position: absolute; right: 30px; left: 30px; padding: 10px 0; >figure.effect-text-four p < bottom: 30px; line-height: 1.5; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); >figure.effect-text-four h3 < top: 30px; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; -webkit-transform: translate3d(0,20px,0); transform: translate3d(0,20px,0); >figure.effect-text-four:hover h3 < -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); >figure.effect-text-four h3::after < position: absolute; top: 100%; left: 0; width: 100%; height: 4px; background: #fff; content: ''; -webkit-transform: translate3d(0,40px,0); transform: translate3d(0,40px,0); >figure.effect-text-four h3::after, figure.effect-text-four p < opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; >figure.effect-text-four:hover h3::after, figure.effect-text-four:hover p

Эффекты при наведении на картинку с текстом CSS

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

Пример

HTML

CSS 1

 /* Общие стили */ *, *:after, *:before < border-box; box-sizing: border-box; >.clearfix:before, .clearfix:after < content: ''; display: table; >.clearfix:after < clear: both; >.hover-text-one < overflow: hidden; margin: 0; width: 100%; list-style: none; text-align: center; >.hover-text-one figure < position: relative; z-index: 1; display: inline-block; overflow: hidden; background: #527c82; text-align: center; cursor: pointer; >.hover-text-one figure img < position: relative; display: block; min-height: 100%; opacity: 0.8; >.hover-text-one figure figcaption < padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; >.hover-text-one figure figcaption::before, .hover-text-one figure figcaption::after < pointer-events: none; >.hover-text-one figure figcaption < position: absolute; top: 0; left: 0; width: 100%; height: 100%; >.hover-text-one figure h3 < word-spacing: -0.15em; font-weight: 300; >.hover-text-one figure h3 span < font-weight: 800; >.hover-text-one figure h3, .hover-text-one figure p < margin: 0; >.hover-text-one figure p < letter-spacing: 1px; font-size: 68.5%; >/* Эффект при наведении */ figure.effect-text-two figcaption::before < position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%); background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%); content: ''; opacity: 0; -webkit-transform: translate3d(0,50%,0); transform: translate3d(0,50%,0); >figure.effect-text-two h3 < position: absolute; top: 50%; left: 0; width: 100%; color: #f66d52 !important; -webkit-transition: -webkit-transform 0.35s, color 0.35s; transition: transform 0.35s, color 0.35s; -webkit-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); >figure.effect-text-two figcaption::before, figure.effect-text-two p < -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; >figure.effect-text-two p < position: absolute; bottom: 0; left: 0; padding: 2em; width: 100%; opacity: 0; -webkit-transform: translate3d(0,10px,0); transform: translate3d(0,10px,0); >figure.effect-text-two:hover h3 < color: #fff; -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0); transform: translate3d(0,-50%,0) translate3d(0,-40px,0); >figure.effect-text-two:hover figcaption::before , figure.effect-text-two:hover p

CSS 2

 /* Общие стили */ *, *:after, *:before < border-box; box-sizing: border-box; >.clearfix:before, .clearfix:after < content: ''; display: table; >.clearfix:after < clear: both; >.hover-text-one < overflow: hidden; margin: 0; width: 100%; list-style: none; text-align: center; >.hover-text-one figure < position: relative; z-index: 1; display: inline-block; overflow: hidden; background: #527c82; text-align: center; cursor: pointer; >.hover-text-one figure img < position: relative; display: block; min-height: 100%; opacity: 0.8; >.hover-text-one figure figcaption < padding: 2em; color: #fff; text-transform: uppercase; font-size: 1.25em; -webkit-backface-visibility: hidden; backface-visibility: hidden; >.hover-text-one figure figcaption::before, .hover-text-one figure figcaption::after < pointer-events: none; >.hover-text-one figure figcaption < position: absolute; top: 0; left: 0; width: 100%; height: 100%; >.hover-text-one figure h3 < word-spacing: -0.15em; font-weight: 300; >.hover-text-one figure h3 span < font-weight: 800; >.hover-text-one figure h3, .hover-text-one figure p < margin: 0; >.hover-text-one figure p < letter-spacing: 1px; font-size: 68.5%; >/* Эффект при наведении */ figure.effect-text-one img < width: -webkit-calc(100% + 50px); width: calc(100% + 100px); opacity: 0.7; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; transform: scale(1.2); >figure.effect-text-one figcaption < top: auto; bottom: 0; height: 50%; text-align: left; >figure.effect-text-one h3, figure.effect-text-one p < -webkit-transform: translate3d(0,40px,0); transform: translate3d(0,40px,0); >figure.effect-text-one h3 < color: #f66d52 !important; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; >figure.effect-text-one p < background: rgba(0,0,0,0.6); color: #fff; padding: 10px; opacity: 0; -webkit-transition: opacity 0.2s, -webkit-transform 0.35s; transition: opacity 0.2s, transform 0.35s; >figure.effect-text-one:hover img, figure.effect-text-one:hover p < opacity: 1; >figure.effect-text-one:hover img, figure.effect-text-one:hover h3, figure.effect-text-one:hover p < -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); >figure.effect-text-one:hover p

CSS эффект при наведение на картинку

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

See the Pen EbdNyb by Denis (@Dwstroy) on CodePen.

CSS эффект описываем каркас блоков для трансформации

Скачиваем подготовленный шаблон, в нем два файла, Index в котором подключен CSS. В CSS сбросили отступы, установили шрифт, и подключили на задний фон изображение. В самой папке /img лежат два файла, фон и картинка для примеры.

Начальный шаблон — скачать

Описываем все блоки, которые нужно вывести на страницу, и заполняем их текстовым содержанием.

div.dws>div.blocImg>img+div.blocText>div.text>h2+p

 
 
  
 
CSS эффект при наведении
 
transition 
transform scale(x,y)
:hover ::before ::after
 
 
 
 
 
 

Описываем основные стили картинки / эффект на css

Задаем блоку с картинкой фиксированную ширину и высоту, а при помощи overflow: hidden , скрываем все лишнее за ее пределами, добавляем курсор.

.blocImg

Позиционируем для удобства блок посередине экрана.

Затем картинке делаем ширину в 100% и вешаем плавное анимирование в пол секунды.

.blocImg img

Далее трансформируем, немного разворачиваем rotate(-10deg) , и увеличиваем в размере scale(1.3) .

Задаем фильтр размытия в 1 пик. filter: blur(1px) и затемним фон, а для этого допишем классу .blocImg черный фон, а при наведении саму картинку делаем на половину прозрачной opacity: .5; .

.dws:hover .blocImg img

Теперь приступим к стилилизации текста.

Оформляем текстовое содержание блока

Абсолютно родителя позиционируем блок с текстом .blocText и задаем отступы по всем краям в 30 пик. По рамке в дальнейшем сделаем анимированное ее появление.

.blocText

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

.text

Заголовку второго уровня задаем 25 пик.

.text h2

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

.text h2 span

Параграф позиционируем абсолютно, опускаем его на 180 пик. задаем ширину его блока в 250 пик. Добавляем с левой стороны border в 4 пик. и задаем внутренние отступы.

.text p

Описываем псевдоэлементы ::before и ::after

Уберем обводку outline , которую до этого задавали классу .blocText и зададим ее для псевдоэлементов.

Создаем псевдоэлементы ::before ::after , описываем их основные стили.

Позиционируем их абсолютно, задаем ширину и высоту по 100% и платное появление в пол секунды.

.blocText::before, .blocText::after

Отдельно ::before присваиваем бордюр с верху и низу в 1 пик. и задаем трансформацию для оси Х transform: scale(0,1) .

.blocText::before

Тоже самое делаем для ::after только бордюр теперь с левой и правой стороны, а трансформация по оси Y

.blocText::after

А для их появления, трансформацию для всех осей указываем в 1.

.dws:hover .blocText::before, .dws:hover .blocText::after

И остается скрыть текст, для этого классу .text присвоим opacity: 0 и добавим плавное его появление.

А по наведении текст отображаем.

.dws:hover .text

В конечном итоге получили классный Hover Effects при наведение на картинку.

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

Урок подготовил Горелов Денис.

Оставить комментарий:

Отзывы

Здравствуйте, подскажите пож-та что прописать в файле style.css что бы описание картинки было только при наведении курсора, а то описание расширяет рамку и смотрится не красиво. Вот содержание:
/* set some basic CSS for NextGEN Download Gallery */

.ngg-download-frm hr display: block;
float: none;
clear: both;
background: transparent;
border: none;
border-bottom: 1px solid #ccc;
padding-top: 1em;
margin: 1em auto;
>

Юрий

Как сделать такой эффект при наведении на картинку?

Как сделать такой hover эффект? Без hover’а должен быть какой эффект? Какой формат изображения нужно?

Отслеживать
28.2k 12 12 золотых знаков 76 76 серебряных знаков 143 143 бронзовых знака
задан 7 мар 2020 в 12:09
89 7 7 бронзовых знаков
png — а эффект называется grayscale — который применяется к img
7 мар 2020 в 12:10
ищется так: Черно белый hover-эффект при наведение на CSS
7 мар 2020 в 12:15

1 ответ 1

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

Как сделать такой hover эффект? Без hover’а должен быть какой эффект? Какой формат изображения нужно?

Это CSS фильтры изображений, с помощью которых можно создавать различные эффекты для изображений. Используйте свойство filter . Вот пример:

• первая картинка использует фильтр обесцвечивания, где применяются оттенки серого цвета к изображению в зависимости от указанного процента;
• вторая эффект сепия;
• третья инверсии изображения;

И это только несколько примеров использования CSS фильтров.

img < display: inline-block; height: 100px; width: auto; margin: 10px; >.filter__01 < filter: grayscale(100%); >.filter__02 < filter: sepia(100%); >.filter__03 < filter: invert(70%); >.filter__01:hover, .filter__02:hover, .filter__03:hover