Как изменить картинку при наведении на нее курсора или немного о hover-эффектах

Рубрика: Справочник CSS

16 мая 2015

Здравствуйте уважаемые читатели блога webcodius! Часто получаю вопросы: как сделать так, чтобы картинка на web-страничке менялась при наведении на нее курсора мыши. Такой эффект встречается на многих сайтах и самый простой пример, это когда вы наводите курсор на какую-нибудь кнопку, а она после этого меняет цвет. Иногда для создания подобного эффекта применяется JavaScript, но обычно достаточно одного CSS, особенно после появления CSS третьей версии. Далее в статье я расскажу как менять картинку при наведении курсора мыши с помощью только одного CSS, рассмотрю несколько способов и различные эффекты.

Эффекты изменения элемента веб страницы при наведении курсора мыши часто называют hover-эффектами. Связано это с тем, что при реализации таких эффектов используется псевдокласс :hover, который определяет стиль элемента при наведении на него курсора мыши.

Для начала рассмотрим вариант попроще. Допустим у Вас на страничке вставлена картинка, как приведено ниже:

hover эфекты

Как вставлять картинки на веб-страницу вы можете узнать из статьи как вставить изображение на web-страницу.

И допустим вам необходимо менять ее отображение при наведении на нее курсора мыши. При вставке этого изображения к тегу img добвим атрибут class="animate1", тогда html-код картинки будет выглядеть примерно так:

Для начала можно просто при наведении курсора сделать картинку прозрачной. За прозрачность в CSS отвечает свойство opacity, которое относится к CSS3. В качестве значения используются дробные числа от 0 до 1, где ноль соответствует полной прозрачности, а единица, наоборот, непрозрачности объекта. Для старых версий Internet Explorer придется использовать свойство filter со значением alpha(Opacity=X), так как они не поддерживают свойство opacity. Вместо X надо будет подставить число от 0 до 100, где 0 означает полная прозрачность, а 100 — полная непрозрачность.

Тогда, чтобы сделать картинку прозрачной при наведении курсора в файл стилей, или между тегами <head> и </head> html-файла нужно добавить следующий css-код:

На случай если вы не разбираетесь в CSS поясню, что запись img.animate1:hover говорит браузеру, что для всех элементов <img>, имеющих атрибут class равный animate1 при наведении на них курсора мыши, применять указанные стили. А стили указываются между фигурными скобками { и }. Если все сделали правильно, то должно получиться примерно так:

hover эфекты

Можно сделать картинку в исходном состоянии полупрозрачной, а при наведении курсора делать ее не прозрачной. Тогда в CSS-файл нужно добавить такие строки:

img.animate1 {
   filter: alpha (Opacity=25);
   opacity: 0.25;
}
img.animate1:hover {
   filter: alpha (Opacity=100);
   opacity: 1;
}

Результат будет такой:

hover эфекты

Для большего эффекта можно замедлить изменения прозрачности картинки. Для этого можно воспользоваться свойством CSS transition, которое устанавливает эффект перехода между двумя состояниями элемента. Добавим для примера одну секунду замедления. Тогда наш CSS код станет таким:

img.animate1 {
   filter: alpha (Opacity=25);
   opacity: 0.25;
   -moz-transition: all 1s ease-in-out; /* эффект перехода для Firefox до версии 16.0 */
   -webkit-transition: all 1s ease-in-out; /* эффект перехода для Chrome до версии 26.0, Safari, Android и iOS */
   -o-transition: all 1s ease-in-out; /* эффект перехода для Opera до версии 12.10 */
   transition: all 1s ease-in-out; /* эффект перехода для других браузеров */
}
img.animate1:hover {
   filter: alpha (Opacity=100);
   opacity: 1;
}

Результат:

hover эфекты

С помощью свойства transform изображение можно масштабировать, вращать, сдвигать, наклонять. Попробуем увеличить картинку. Тогда css-код будет таким:

img.animate1{
— moz-transition: all 1s ease;
— webkit-transition: all 1s ease;
— o-transition: all 1s ease;
transition: all 1s ease;
}
img.animate1:hover{
— moz-transform: scale (1.5); /* эффект трансформации для Firefox до версии 16.0 */
— webkit-transform: scale (1.5); /* эффект трансформации для Chrome до версии 26.0, Safari, Android и iOS */
— o-transform: scale (1.5); /* эффект трансформации для Opera до версии 12.10 */
— ms-transform: scale (1.5); /* эффект трансформации для IE 9.0 */
transform: scale (1.5); /* эффект трансформации для других браузеров */
}

И результат будет таким:

hover эфекты

К увеличению картинки можно добавить поворот. Тогда css стили немного изменяться:

img.animate1{
— moz-transition: all 1s ease;
— webkit-transition: all 1s ease;
— o-transition: all 1s ease;
transition: all 1s ease;
}
img.animate1:hover{
— moz-transform: rotate (360deg) scale (1.5);
— webkit-transform: rotate (360deg) scale (1.5);
— o-transform: rotate (360deg) scale (1.5);
— ms-transform: rotate (360deg) scale (1.5);
transform: rotate (360deg) scale (1.5);
}

Результат:

hover эфекты

Выше мы рассмотрели случаи, когда в анимировании участвует одна картинка. Далее рассмотрим способы подмены одного изображения на другое. В этом случае обычно подготавливают два изображения одинакового размера: одно для исходного вида, другое для его подмены.

Допустим у нас есть две картинки, одна черно-белая другая цветная:

подмена изображений hover эфекты

Сделаем так, чтобы при наведении курсора на черно-белое изображение отображалось цветное. Для этого исходную картинку сделаем фоном элемента div с помощью свойства background. А при наведнии на картинку курсора будем менять фоновую картинку с помощью все тех же псевдокласса hover и свойства background. Для реализации этого эффекта на html страницу добавляем элемент div с классом rotate1:

И добавляем следующие описания стилей:

div.rotate1 {
background: url (img/2.jpg); /* Путь к файлу с исходным рисунком */
width: 480px; /* Ширина рисунка */
height: 360px; /* Высота рисунка */
}
div.rotate1:hover {
background: url (img/1.jpg); /* Путь к файлу с заменяемым рисунком */
}

И результат:

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

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

В этом случае смена одного рисунка на другой будет осуществляться путем сдвига фонового изображения по вертикали с помощью свойства background-position. Так как при клике по кнопке обычно происходит переход на другую страницу, то изображение вставим в элемент <a>. Тогда в html-страницу вставляем такой код:

А в css-файл такой:

a.rotate2 {
   background: url (img/button.png); /* Путь к файлу с исходным рисунком */
   display: block; /* Ссылка как блочный элемент */
   width: 50px; /* Ширина рисунка в пикселах */
   height: 30px; /* Высота рисунка */
}
a.rotate2:hover {
   background-position: 0 -30px; /* Смещение фона */
}

Результат:

И последний на сегодня способ, это когда одно изображение размещается под другим с помощью css правила position: absolute. В этом случае помещаем в контейнер div два изображения:

И добавим css-стилей:

.animate2{
position:relative;
margin:0 auto;/* устанваливаем блок div по центру страницы*/
width:480px; /* Ширина */
height: 360px; /* Высота */
}
.animate2 img {
position:absolute; /* абсолютное позиционирование*/
left: 0; /* выравниваем картинки по левому верхнему углу div-а*/
top: 0; /* выравниваем картинки по левому верхнему углу div-а */
}

После добавления правил css, картинки будут размещены друг под другом. Теперь управляя прозрачностью картинок с помощью свойства opacity в обычном состоянии будем показывать вторую картинку, а при наведении курсора первую. Для этого в обычном состоянии делаем картинку с классом first полностью прозрачной, а при наведении курсора наоборот: картинка с классом second будет полностью прозрачной, а с классом first не прозрачной:

.animate2 img.first { /* первая картинка полностью прозрачная */
opacity:0;
filter:alpha (opacity=0);
}
.animate2:hover img.first { /* при наведении курсора первая картинка становится не прозрачной */
opacity:1;
filter:alpha (opacity=100);
}
.animate2:hover img.second, .animate2 img.second:hover { /* а вторая при наведении курсора становится прозрачной */
opacity:0;
filter:alpha (opacity=0);
}

Результат:

Можно добиться плавности перехода добавив к последнему правилу свойство CSS transition:

.animate2:hover img.second, .animate2 img.second:hover {
opacity:0;
filter:alpha (opacity=0);
-moz-transition: all 2s ease;
-webkit-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

И результат:

А если добавить свойство transform:

.animate2:hover img.second, .animate2 img.second:hover {
opacity:0;
filter:alpha (opacity=0);
-moz-transform:scale (0, 1);
-webkit-transform:scale (0, 1);
-o-transform:scale (0, 1);
-ms-transform:scale (0, 1);
transform:scale (0, 1); /* уменьшаем ширину картинки до 0 */
}

Получится так:

Комбинируя различные CSS свойства можно добиться различных hover эффектов при смене картинок во время наведения курсора мыши. Эти и другие примеры я поместил на этой странице, там же можно скачать исходники. На этом все, до новых встреч.

(22 оценок, среднее: 4,86 из 5)

Похожие записи

Комментарии

Максим

отличная статья! спасибо!

25 июля 2015 02:36
Андрей

Мне тут нравится, делаю первые шаги, удалось сделать цветовой фон, и затолкать изображение на свою веб страничку, осваиваю пока каркас html, потом займусь CSS, даст бог освою, %), может быть, все пока понятно,изложено доходчиво 😉

30 августа 2015 21:18
Ольга

Спасибо. Наглядно.

16 октября 2015 11:36
Котов

Отличная статья, спасибо. Пытаюсь прикрутить на свой сайт портфолио в виде галереи, но что-то плагины попадаются либо убогие, либо платные. Сделаю ручками вот по такому принципу, как у вас расписано =)

4 ноября 2015 16:59
Дмитрий

Подскажите! Как сделать, чтоб картинка крутилась при наведении (ну, как в этом уроке), но не увеличивалась! Спасибо!

10 ноября 2015 14:58
alex

Чтобы картинка просто крутилась без увеличения, надо убрать параметр scale (1.5) из свойства transform. Тогда css код будет таким:
img.animate1{
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
img.animate1:hover{
-moz-transform: rotate (360deg);
-webkit-transform: rotate (360deg);
-o-transform: rotate (360deg);
-ms-transform: rotate (360deg);
transform: rotate (360deg);
}

10 ноября 2015 17:36
Дмитрий

Разобрался, невнимательно смотрел. Все просто же)! Беру на вооружение ваши советы, очень помогли!

10 ноября 2015 20:57
Артем

не получается с помощью свойства background-position у меня просто пустой блок

16 ноября 2015 16:56
alex

может путь к картинке задали не верно. надо код смотреть, слишком мало информации.
Так то там все просто.
Допустим у вас есть две картинки 100 на 100 пикселей. Делаете из них одну, разместив первую картинку сверху, вторую снизу. Получаете картинку 100 на 200.
На странице делаете блок размером с исходные картинки: 100 на 100, и устанавливаете в качестве фона полученную картинку.
Получится, что будет видна только верхняя половина фоновой картинки, т.е. первый рисунок.
А при наведении на блок смещаете фон с помощью background-position на 100px вверх, т.е. задаета background-position: 0 -100px;
В этом случае будет видна нижняя половина фоновой картинки — второй рисунок.

16 ноября 2015 23:36
midhul

Random Image Load with image specific hovers (rollovers)/случайная картинка при наведении курсора мыши скрипт/
===
<script type="text/javascript">
function randomPick (arr) {
var selected = arr[Math.floor(Math.random()*arr.length)]
return selected;
}
images =
[
"image1.png",
"image2.png",
"image3.png",
"image4.png",
"image5.png"
]
function randomHover () {
var myImage = document.getElementById ('hover');
var selImage = randomPick (images);
myImage.src = selImage;
}
function resetState () {
var myImage = document.getElementById ('hover');
myImage.src = «something.png»;
}
</script>
<img id="hover" src="something.png" onmouseover="randomHover ();" onmouseout="resetState ();">
===

7 декабря 2015 00:11
Михаил

эффекты при наведении http://siteacademy.ru/index.php/css/75-3d-thumbnail-hover-effects

9 декабря 2015 15:43
Дина

Спасибо за статью. Сделала у себя на сайте эффект animate4 — работает! Появилась пара вопросов: стили нужно непременно в <HEAD> прописывать? я сначала пыталась в CSS файле прописывать — не работало. И еще. Как эти стили работают на мобильной версии сайта? Ведь курсора нет, фактически эту функцию выполняет клик по фото. У меня при клике открывается фотография на другом сайте. Я бы хотела эту функцию сохранить, но с введением новых стилей animate4 она пропала. И как реализуется возвращение картинки к нормальным размерам? кликнуть куда-нибудь рядом? не работает. Можно ли это тоже как-то прописать?
Спасибо!

28 декабря 2015 15:39
alex

Дина: Добрый день!
Стили можно прописывать и в css-файл. Видимо у Вас где-то ошибка.
На планшетах и смартфонах hover-эффекты часто работают не так как надо или не работают вообще. Поэтому для мобильной версии сайта hover-эффекты лучше убрать, особенно для ссылок (a:hover). Или эксперементировать с javascript.

29 декабря 2015 10:59
Дина

Вношу поправку. Ссылка на сторонний сайт срабатывает сразу при клике на картинку (в мобильной версии, с телефона или планшета). То есть картинка увеличилась и тут же переход на другой сайт. Можно ли эти действия как-то разделить?
Спасибо.

28 декабря 2015 16:10
Andrey

Спасибо за статью, пригодилось.

7 февраля 2016 14:05
Александр

Здравствуйте... поместил этот стиль... эффекта в обще никакого... я так понял здесь задействован только css ?

14 февраля 2016 04:32
alex

да, только css... где-то у Вас ошибка, возможно атрибут class html элементам не прописали... надо код смотреть

15 февраля 2016 10:19
Григорий

большое спасибо за помощь! очень полезная нам неопытным делателям сайтов.

1 марта 2016 11:42
Алексей

Объясните человеку, который далек от программирования, куда конкретно нужно вставлять этот код? Картинки находятся на главной странице сайта, мне нужно чтобы они все медленно из полупрозрачного состояния становились непрозрачными, при наведении мышки. Я могу зайти в CSS, но куда конкретно вставить код?

5 марта 2016 22:13
alex

to Алексей: код, можно вставлять в любое место css-файла, лучше в конец файла

6 марта 2016 00:04
Алексей

А в какой файл? Если главная страница — это head?

6 марта 2016 00:12
Алексей

Нет, не в head, уже попробовал.
Имеются: Шаблоны, Сниппет, Стили, Скрипты, SVG, Файлы темы, Настройки темы. В каждой категории много файлов. В какой файл какой категории нужно код вставить? Картинки находятся на главной

6 марта 2016 01:58
alex

Адрес сайта скажите, может конкретней смогу сказать... Вообще css-код надо вставить в файл с расширением .css, обычно его называют style.css

6 марта 2016 12:09
Алексей

Нашел файл style.css.scss, но там вообще другое

6 марта 2016 12:21
Алексей

Я написал сайт в поле «Сайт», но возможно вы не видите, так что напишу в комментарии. ozott.ru

6 марта 2016 16:06
alex

Если я правильно определил, то сайт создан на платформе inSales. Судя по html-коду сайта, Вам надо в редакторе темы скорей всего в категории Стили найти файл template.css и попробовать туда вставить нужный код.

7 марта 2016 01:19
Алексей

Нашел, вставил, ничего не изменилось(

7 марта 2016 01:24
alex

Тогда надо проверять правильность css-кода который вставляете. Выложите код сюда.
Либо можете выслать мне на почту [email protected] данные для входа в админскую панель сайта. Завтра я постараюсь посмотреть при наличии времени.

7 марта 2016 01:51
Алексей

Код я копирую в точности как написано в статье и так его и вставляю вконце файла template.css
img.animate1{ — moz-transition: all 1s ease; — webkit-transition: all 1s ease; — o-transition: all 1s ease; transition: all 1s ease; } img.animate1:hover{ — moz-transform: scale (1.5); /* эффект трансформации для Firefox до версии 16.0 */ — webkit-transform: scale (1.5); /* эффект трансформации для Chrome до версии 26.0, Safari, Android и iOS */ — o-transform: scale (1.5); /* эффект трансформации для Opera до версии 12.10 */ — ms-transform: scale (1.5); /* эффект трансформации для IE 9.0 */ transform: scale (1.5); /* эффект трансформации для других браузеров */ }
Я бы очень хотел чтобы вы помогли, но доступ предоставить нет возможности
Источник: http://webcodius.ru/spravochnik-css/kak-izmenit-kartinku-pri-navedenii-na-nee-kursora.html#comment-71

7 марта 2016 02:21
Алексей

Только там он выглядит не как сейчас в комментарии, а как в статье) Надпись «Источник: ......» удаляю соответственно

7 марта 2016 02:23
alex

на Вашем сайте этот код работать не будет, его надо немного изменить. Этот код сработает:
.index-content img {
filter: alpha (Opacity=25);
opacity: 0.25;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.index-content img:hover {
filter: alpha (Opacity=100);
opacity: 1;
}
остается найти нужный файл куда его вставить.

7 марта 2016 19:25
Алексей

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

7 марта 2016 20:20
alex

В файле template.css найдите стиль (в 4075 строке):
.editor a {
color: #383838;
border-bottom: 1px dotted;
}
и поменяйте dotted на none, должно помочь.

8 марта 2016 01:01
Алексей

Получилось, полосы исчезли, только файл оказался не template а _editor.scss строка 11.
А как быть с четкостью картинки?

8 марта 2016 01:12
alex

Возможно четкость связана с тем, что оригинальный размер картинки 1920×1272, а на странице она имеет размер 390×258. Попробуйте уменьшить оригинальный размер картинки.

9 марта 2016 00:56
Алексей

Урааааа, спасибо огроменное, все получилось!!!

9 марта 2016 01:09
Алексей

А вы не могли бы подсказать код для моего сайта, чтобы в каталоге товаров при наведении мышки на картинку товара она сменялась на вторую картинку этого товара?
Как тут:
www.farfetch.com/ru/shopp...px?ffref=hd_mnav
www.lamoda.ru/c/479/cloth...topmenuM&l=3
И в какой файл его вставить?

9 марта 2016 17:40
alex

Как я понял на указанных сайтах такая смена картинок реализована с помощью javascript. Такую смену можно реализовать и с помощью CSS. В данной статье описано как это сделать.
Помочь Вам вряд ли смогу так как здесь требуется правка html-кода, который у вас скорей всего генерируется php-скриптами.

10 марта 2016 01:34
Алексей

Понял, все равно спасибо, вы мне и так очень помогли

10 марта 2016 02:08
Григорий

Подскажите пожалуйста. Как сделать чтобы картинка с примера №3 не становилась серой обратно при отведении мышки.

6 апреля 2016 10:38
alex

В этом случае скорей всего не обойтись без javascript. Добавляем картинке событие onmouseenter и добавляем в него какую-нибудь функцию.
А в функции приравниваем свойство opacity=1.
Вот пример

6 апреля 2016 14:00
Лилит

Добрый день! Интересная статья, сама не программист и в кодах особо не смыслю, но так как все описали — все доступно. У меня вопрос. Можно ли сделать так, чтобы при клике (не наведении) мыши на картинку меняли цвет определенные части фото? Пример фото могу выслать на почту, если напишите ее.
Мне очень нужен совет, поэтому буду благодарна за Ваш ответ.
Лилит =)

10 апреля 2016 17:05
alex

Либо, если возможно, делить картинку на части и к каждой части применять эффекты... либо использовать javascript... присылайте картинку, напишите что надо менять, будет время постараюсь помочь ([email protected])

10 апреля 2016 23:50
Игорь

Спасибо, статья помогла) Я себе ссылки-кнопки делал.
P.s. Очень редко вижу, что автор отвечает в комментах) За это огромный респект!!!))) =)

29 апреля 2016 19:31
александр

Вы очень мне помогли. Большое, от всего сердца, СПАСИБО !

15 июня 2016 15:45
Юлия

Скопировала код для увеличения картинки с кодовой страницы статьи 🙂 Работает! Спасибо огромное!
Кстати, работает и в мобильной версии.

17 июня 2016 13:14
Петр

Здравствуйте,
Огромное спасибо за статью. В море безнадеги забрезжил луч 🙂
Но помогите, пожалуйста. Пытаюсь увеличить картинку — не получается. Копирую ваш код — ноль реакции. При этом изменение прозрачности картинки идет на ура. Вот на этом рубеже мозг отказывается что-либо понимать. Ведь если бы что-то было неправильно в коде, не получалось бы ничего, верно?

10 августа 2016 19:23
alex

За увеличение отвечает свойство transform: scale (1.5), где 1.5 коэффициент увеличения... чтобы понять почему у Вас не получается, надо смотреть весь html и css код... на почту можете скинуть [email protected], будет время посмотрю

11 августа 2016 10:25
Николай

Спасибо за полезную статью. У вас в коде смены картинки после URL перед скобкой пробел. Из за него код не работает. Запарился искать причину. Ещё увеличение картинки у меня не работало. Потом посмотрю может эта же проблема.

30 августа 2016 15:16
КУШ(REI)

Круто!!! Спасибо! 😀

25 сентября 2016 17:10
иван

Спасибо за эфекты *CRAZY*

26 сентября 2016 11:56
Леля

Подскажите, а почему картинки могут не прогружаться? Из-за этого не работает ничего, а как исправить не знаю

2 октября 2016 19:30
alex

путь к картинкам скорей всего указан не верно

3 октября 2016 10:00
Дмитрий

Все замечательно работает, быстро, легко и просто. Большое спасибо! =) =) =)

3 ноября 2016 20:20
maloir

Здравствуйте, а как сделать такое с тремя картинками? Хочу что бы черно-белая становилась цветной, это я понял как делать, но как сделать что бы таких картинок было 3, для каждой отдельно стиль прописывать?

7 декабря 2016 18:35
alex

Не надо для каждой прописывать. Помещаете правила стилей в класс, например класс animate:
.animate:hover{opacity:1}
И затем всем трем картинкам присваиваете атрибуту class значение animate:
<img src="image1.jpg" class="animate">
<img src="image2.jpg" class="animate">
<img src="image3.jpg" class="animate">

12 декабря 2016 12:05
Ярослав

Здравствуйте. Очень нужна помощь! Уже не знаю, где искать.
Представьте, на сайте есть картинка шкафа с закрытыми дверками. Наводишь курсор на одну дверку и она открывается, наводишь на другую и она тоже открывается. Я понимаю, что нужны 4 картинки (обе закрыты, правая открыта, левая открыта, обе открыты). Как сделать такую анимацию на сайте? Есть может быть какие-то внешние сайты (например Мегавизор для вращения на 360 градусов)? Чтобы там сделать, скопировать код и вставить на свой сайт. Спасибо.

18 декабря 2016 14:21
Виктор

Здравствуйте. Я сейчас делаю сайт на локальном сервере, вставляю ваш код где картинка увеличивается при наведении в корень файла template.css, но ничего не работает.
img.animate1{ — moz-transition: all 1s ease; — webkit-transition: all 1s ease; — o-transition: all 1s ease; transition: all 1s ease; } img.animate1:hover{ — moz-transform: scale (1.5); /* эффект трансформации для Firefox до версии 16.0 */ — webkit-transform: scale (1.5); /* эффект трансформации для Chrome до версии 26.0, Safari, Android и iOS */ — o-transform: scale (1.5); /* эффект трансформации для Opera до версии 12.10 */ — ms-transform: scale (1.5); /* эффект трансформации для IE 9.0 */ transform: scale (1.5); /* эффект трансформации для других браузеров */ }

20 января 2017 23:18
alex

Нужно видеть и html код... так не понять почему не работает. Возможно в теге img нет атрибута class="animate1".

24 января 2017 15:48
Михаил

Привет. А как сделать текст при наведении на картинку?

26 января 2017 22:19
Ирина

Спасибо вам большое за такое подробное и понятное описание! Удивлена, что всем отвечаете. Может, и мне повезет?) Подскажите, пожалуйста, как в предпоследнем примере сделать так, чтобы картинка опять становилась черно-белой при удалении курсора, но постепенно, с эффектом, а не сразу?

2 февраля 2017 13:16
alex

Вот код, чтобы картинка плавно появлялась и плавно исчезала:
<div class="animate">
<img class="first" src="img/1.jpg" />
<img class="second" src="img/2.jpg" />
</div>
.animate {
position:relative;
margin:0 auto;
width:480px;
height: 360px;
}
.animate img {
position:absolute;
left: 0;
top: 0;
}
.animate img.second{
opacity:1;
filter:alpha (opacity=100);
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.animate:hover img.second, .animate img.second:hover {
opacity:0;
filter:alpha (opacity=0);
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}

6 февраля 2017 01:06
Ирина

Alex, Большое спасибо!
Работает. Эффект потрясающий.

6 февраля 2017 11:54
Александр

Очень впечатляет =)

22 февраля 2017 00:29
Саша

Почему у меня работают все коды, кроме увеличения?
<img class="animate1" src="/kartinki/682ec64bd63d4bb58dfd7b048068281f.jpg" style="width: 219px; height: 123px;" />

<style>

img.animate1 {

filter: alpha (Opacity=25);

opacity: 0.25;

-moz-transition: all 1s ease-in-out; /* эффект перехода для Firefox до версии 16.0 */

-webkit-transition: all 1s ease-in-out; /* эффект перехода для Chrome до версии 26.0, Safari, Android и iOS */

-o-transition: all 1s ease-in-out; /* эффект перехода для Opera до версии 12.10 */

transition: all 1s ease-in-out; /* эффект перехода для других браузеров */

}

img.animate1:hover {

filter: alpha (Opacity=100);

opacity: 1;

}

</style>

26 февраля 2017 18:03
Саша

Извините, не то скопировал(
<img class="animate1" src="/kartinki/682ec64bd63d4bb58dfd7b048068281f.jpg" style="width: 219px; height: 123px;" />

<style>

img.animate1{

— moz-transition: all 1s ease;

— webkit-transition: all 1s ease;

— o-transition: all 1s ease;

transition: all 1s ease;

}

img.animate1:hover{

— moz-transform: scale (1.5);

— webkit-transform: scale (1.5);

— o-transform: scale (1.5);

— ms-transform: scale (1.5);
transform: scale (1.5);
}

</style>

26 февраля 2017 18:05
Виктор

Alex,добрый день!
Подскажите, как к осветлению добавить текст?

9 марта 2018 23:46
Antares

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

11 марта 2018 18:46
FruTT

А можно ли чтобы это было не при наведении, а по таймингу?

24 марта 2018 00:56
роман

отличная статья, в которой собраны все основные варианты изменения и замены картинок (изображений) при наведении мышей (ховер — hover), наверное даже лучшее описание работы с изображениями с эффектами. автор описал с подробными комментариями все основные способы, а не ограничился одним бэкграундом, как делают другие и считают что написали что-то полезное. по поводу вопросов — сомневаюсь, что автор, предоставив достаточно много и хорошо описанной информации обязан кому-то решать его проблемы, хотя и делает это. тем более что вставляя код, хотя бы лишние пропуски удаляли, чтобы не растягивать весь текст. а если Вам помогли, то наверное надо бы найти способ отблагодарить автора.
надеюсь мой. как бы СЕО текст в комментарии поможет другим легче находить данную статью.

28 августа 2019 12:36
darhan

я в точности вставил ваш код но почему то у меня не получается последний этап можете помочь
вот код
.animate2{
position:relative;
margin:0 auto;/* устанваливаем блок div по центру страницы*/
width:480px; /* Ширина */
height: 360px; /* Высота */
}
.animate2 img {
position:absolute; /* абсолютное позиционирование*/
left: 0; /* выравниваем картинки по левому верхнему углу div-а*/
top: 0; /* выравниваем картинки по левому верхнему углу div-а */
}
.animate2 img.first { /* первая картинка полностью прозрачная */
opacity:0;
filter:alpha (opacity=0);
}
.animate2:hover img.first {
opacity:1;
filter:alpha (opacity=100);
}
.animate2:hover img.second, .animate2 img.second:hover {
opacity:0;
filter:alpha (opacity=0);
}
.animate2:hover img.second, .animate2 img.second:hover {
opacity:0;
filter:alpha (opacity=0);
-moz-transition: all 2s ease;
-webkit-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
opacity:0;
filter:alpha (opacity=0);
-moz-transform:scale (0, 1);
-webkit-transform:scale (0, 1);
-o-transform:scale (0, 1);
-ms-transform:scale (0, 1);
transform:scale (0, 1);
}
вот html:
Эффект перекатывания
img.animate1:hover {
filter: alpha (Opacity=25);/* прозрачность для IE */
opacity: 0.25;/* прозрачность для других браузеров */
}

18 ноября 2020 10:19
Роман

Здравствуйте! Подскажите пожалуйста, как сделать чтобы при наведении курсора например на картинку 1 которая допустим находится на правой стороне страницы, исчезала (появлялась) картинка 2 на противоположной стороне страницы.

29 ноября 2021 01:53

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