Как изменить картинку при наведении на нее курсора или немного о hover-эффектах
Здравствуйте уважаемые читатели блога webcodius! Часто получаю вопросы: как сделать так, чтобы картинка на web-страничке менялась при наведении на нее курсора мыши. Такой эффект встречается на многих сайтах и самый простой пример, это когда вы наводите курсор на какую-нибудь кнопку, а она после этого меняет цвет. Иногда для создания подобного эффекта применяется JavaScript, но обычно достаточно одного CSS, особенно после появления CSS третьей версии. Далее в статье я расскажу как менять картинку при наведении курсора мыши с помощью только одного CSS, рассмотрю несколько способов и различные эффекты.
Эффекты изменения элемента веб страницы при наведении курсора мыши часто называют hover-эффектами. Связано это с тем, что при реализации таких эффектов используется псевдокласс :hover, который определяет стиль элемента при наведении на него курсора мыши.
Для начала рассмотрим вариант попроще. Допустим у Вас на страничке вставлена картинка, как приведено ниже:
Как вставлять картинки на веб-страницу вы можете узнать из статьи как вставить изображение на web-страницу.
И допустим вам необходимо менять ее отображение при наведении на нее курсора мыши. При вставке этого изображения к тегу img
добвим атрибут class="animate1"
, тогда html-код картинки будет выглядеть примерно так:
<img class="animate1" src="/img/1.jpg">
Для начала можно просто при наведении курсора сделать картинку прозрачной. За прозрачность в CSS отвечает свойство opacity
, которое относится к CSS3. В качестве значения используются дробные числа от 0 до 1, где ноль соответствует полной прозрачности, а единица, наоборот, непрозрачности объекта. Для старых версий Internet Explorer придется использовать свойство filter
со значением alpha(Opacity=X)
, так как они не поддерживают свойство opacity
. Вместо X надо будет подставить число от 0 до 100, где 0 означает полная прозрачность, а 100 — полная непрозрачность.
Тогда, чтобы сделать картинку прозрачной при наведении курсора в файл стилей, или между тегами <head>
и </head>
html-файла нужно добавить следующий css-код:
<style>
img.animate1:hover {
filter: alpha (Opacity=25);/* прозрачность для IE */
opacity: 0.25;/* прозрачность для других браузеров */
}
</style>
На случай если вы не разбираетесь в CSS поясню, что запись img.animate1:hover
говорит браузеру, что для всех элементов <img>,
имеющих атрибут class
равный animate1
при наведении на них курсора мыши, применять указанные стили. А стили указываются между фигурными скобками { и }. Если все сделали правильно, то должно получиться примерно так:
Можно сделать картинку в исходном состоянии полупрозрачной, а при наведении курсора делать ее не прозрачной. Тогда в CSS-файл нужно добавить такие строки:
img.animate1 {
filter: alpha (Opacity=25);
opacity: 0.25;
}
img.animate1:hover {
filter: alpha (Opacity=100);
opacity: 1;
}
Результат будет такой:
Для большего эффекта можно замедлить изменения прозрачности картинки. Для этого можно воспользоваться свойством 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;
}
Результат:
С помощью свойства 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); /* эффект трансформации для других браузеров */
}
И результат будет таким:
К увеличению картинки можно добавить поворот. Тогда 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);
}
Результат:
Выше мы рассмотрели случаи, когда в анимировании участвует одна картинка. Далее рассмотрим способы подмены одного изображения на другое. В этом случае обычно подготавливают два изображения одинакового размера: одно для исходного вида, другое для его подмены.
Допустим у нас есть две картинки, одна черно-белая другая цветная:
Сделаем так, чтобы при наведении курсора на черно-белое изображение отображалось цветное. Для этого исходную картинку сделаем фоном элемента div
с помощью свойства background
. А при наведнии на картинку курсора будем менять фоновую картинку с помощью все тех же псевдокласса hover
и свойства background
. Для реализации этого эффекта на html страницу добавляем элемент div
с классом rotate1
:
<div class="cod"></div>
И добавляем следующие описания стилей:
div.rotate1 {
background: url (img/2.jpg); /* Путь к файлу с исходным рисунком */
width: 480px; /* Ширина рисунка */
height: 360px; /* Высота рисунка */
}
div.rotate1:hover {
background: url (img/1.jpg); /* Путь к файлу с заменяемым рисунком */
}
И результат:
Данный способ имеет один существенный недостаток. Так как второй рисунок загружается только при наведении курсора, то в случае если у пользователя медленный интернет, а размер файла с картинкой имеет большой размер, отображение картинки будет происходить с некоторой паузой. Поэтому ниже рассмотрим еще несколько способов подмены картинок при наведении курсора мыши.
Следующий способ будет основан на объединении двух картинок в один файл. Допустим нам нужно на страничку поместить кнопку, которая при наведении на нее курсора мыши меняла бы вид. Для этого два изображения объединяем в один файл и результирующая картинка будет выглядеть примерно так:
В этом случае смена одного рисунка на другой будет осуществляться путем сдвига фонового изображения по вертикали с помощью свойства background-position
. Так как при клике по кнопке обычно происходит переход на другую страницу, то изображение вставим в элемент <a>
. Тогда в html-страницу вставляем такой код:
<p align="center"><a href="#" class="rotate2"></a></p>
А в 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
два изображения:
<div class="animate2">
<img class="first" src="img/1.jpg" />
<img class="second" src="img/2.jpg" />
</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 эффектов при смене картинок во время наведения курсора мыши. Эти и другие примеры я поместил на этой странице, там же можно скачать исходники. На этом все, до новых встреч.
Похожие записи
Оставить комментарий
отличная статья! спасибо!
Мне тут нравится, делаю первые шаги, удалось сделать цветовой фон, и затолкать изображение на свою веб страничку, осваиваю пока каркас html, потом займусь CSS, даст бог освою, %), может быть, все пока понятно,изложено доходчиво 😉
Спасибо. Наглядно.
Отличная статья, спасибо. Пытаюсь прикрутить на свой сайт портфолио в виде галереи, но что-то плагины попадаются либо убогие, либо платные. Сделаю ручками вот по такому принципу, как у вас расписано =)
Подскажите! Как сделать, чтоб картинка крутилась при наведении (ну, как в этом уроке), но не увеличивалась! Спасибо!
Чтобы картинка просто крутилась без увеличения, надо убрать параметр 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);
}
Разобрался, невнимательно смотрел. Все просто же)! Беру на вооружение ваши советы, очень помогли!
не получается с помощью свойства
background-position
у меня просто пустой блокможет путь к картинке задали не верно. надо код смотреть, слишком мало информации.
Так то там все просто.
Допустим у вас есть две картинки 100 на 100 пикселей. Делаете из них одну, разместив первую картинку сверху, вторую снизу. Получаете картинку 100 на 200.
На странице делаете блок размером с исходные картинки: 100 на 100, и устанавливаете в качестве фона полученную картинку.
Получится, что будет видна только верхняя половина фоновой картинки, т.е. первый рисунок.
А при наведении на блок смещаете фон с помощью background-position на 100px вверх, т.е. задаета background-position: 0 -100px;
В этом случае будет видна нижняя половина фоновой картинки — второй рисунок.
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 ();">
===
эффекты при наведении http://siteacademy.ru/index.php/css/75-3d-thumbnail-hover-effects
Спасибо за статью. Сделала у себя на сайте эффект animate4 — работает! Появилась пара вопросов: стили нужно непременно в <HEAD> прописывать? я сначала пыталась в CSS файле прописывать — не работало. И еще. Как эти стили работают на мобильной версии сайта? Ведь курсора нет, фактически эту функцию выполняет клик по фото. У меня при клике открывается фотография на другом сайте. Я бы хотела эту функцию сохранить, но с введением новых стилей animate4 она пропала. И как реализуется возвращение картинки к нормальным размерам? кликнуть куда-нибудь рядом? не работает. Можно ли это тоже как-то прописать?
Спасибо!
Дина: Добрый день!
Стили можно прописывать и в css-файл. Видимо у Вас где-то ошибка.
На планшетах и смартфонах hover-эффекты часто работают не так как надо или не работают вообще. Поэтому для мобильной версии сайта hover-эффекты лучше убрать, особенно для ссылок (a:hover). Или эксперементировать с javascript.
Вношу поправку. Ссылка на сторонний сайт срабатывает сразу при клике на картинку (в мобильной версии, с телефона или планшета). То есть картинка увеличилась и тут же переход на другой сайт. Можно ли эти действия как-то разделить?
Спасибо.
Спасибо за статью, пригодилось.
Здравствуйте... поместил этот стиль... эффекта в обще никакого... я так понял здесь задействован только css ?
да, только css... где-то у Вас ошибка, возможно атрибут class html элементам не прописали... надо код смотреть
большое спасибо за помощь! очень полезная нам неопытным делателям сайтов.
Объясните человеку, который далек от программирования, куда конкретно нужно вставлять этот код? Картинки находятся на главной странице сайта, мне нужно чтобы они все медленно из полупрозрачного состояния становились непрозрачными, при наведении мышки. Я могу зайти в CSS, но куда конкретно вставить код?
to Алексей: код, можно вставлять в любое место css-файла, лучше в конец файла
А в какой файл? Если главная страница — это head?
Нет, не в head, уже попробовал.
Имеются: Шаблоны, Сниппет, Стили, Скрипты, SVG, Файлы темы, Настройки темы. В каждой категории много файлов. В какой файл какой категории нужно код вставить? Картинки находятся на главной
Адрес сайта скажите, может конкретней смогу сказать... Вообще css-код надо вставить в файл с расширением .css, обычно его называют style.css
Нашел файл style.css.scss, но там вообще другое
Я написал сайт в поле «Сайт», но возможно вы не видите, так что напишу в комментарии. ozott.ru
Если я правильно определил, то сайт создан на платформе inSales. Судя по html-коду сайта, Вам надо в редакторе темы скорей всего в категории Стили найти файл template.css и попробовать туда вставить нужный код.
Нашел, вставил, ничего не изменилось(
Тогда надо проверять правильность css-кода который вставляете. Выложите код сюда.
Либо можете выслать мне на почту [email protected] данные для входа в админскую панель сайта. Завтра я постараюсь посмотреть при наличии времени.
Код я копирую в точности как написано в статье и так его и вставляю вконце файла 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
Только там он выглядит не как сейчас в комментарии, а как в статье) Надпись «Источник: ......» удаляю соответственно
на Вашем сайте этот код работать не будет, его надо немного изменить. Этот код сработает:
.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;
}
остается найти нужный файл куда его вставить.
Получилось, но появились другие проблемы. При вставке ссылки в картинку появилась полоса по центру картинки. И при наведении на картинку она сначала не четкая, а потом когда прозрачность полностью восстанавливается картинка становится четкой. В общем можете посмотреть сами на сайте
В файле template.css найдите стиль (в 4075 строке):
.editor a {
color: #383838;
border-bottom: 1px dotted;
}
и поменяйте dotted на none, должно помочь.
Получилось, полосы исчезли, только файл оказался не template а _editor.scss строка 11.
А как быть с четкостью картинки?
Возможно четкость связана с тем, что оригинальный размер картинки 1920×1272, а на странице она имеет размер 390×258. Попробуйте уменьшить оригинальный размер картинки.
Урааааа, спасибо огроменное, все получилось!!!
А вы не могли бы подсказать код для моего сайта, чтобы в каталоге товаров при наведении мышки на картинку товара она сменялась на вторую картинку этого товара?
Как тут:
www.farfetch.com/ru/shopp...px?ffref=hd_mnav
www.lamoda.ru/c/479/cloth...topmenuM&l=3
И в какой файл его вставить?
Как я понял на указанных сайтах такая смена картинок реализована с помощью javascript. Такую смену можно реализовать и с помощью CSS. В данной статье описано как это сделать.
Помочь Вам вряд ли смогу так как здесь требуется правка html-кода, который у вас скорей всего генерируется php-скриптами.
Понял, все равно спасибо, вы мне и так очень помогли
Подскажите пожалуйста. Как сделать чтобы картинка с примера №3 не становилась серой обратно при отведении мышки.
В этом случае скорей всего не обойтись без javascript. Добавляем картинке событие onmouseenter и добавляем в него какую-нибудь функцию.
А в функции приравниваем свойство opacity=1.
Вот пример
Добрый день! Интересная статья, сама не программист и в кодах особо не смыслю, но так как все описали — все доступно. У меня вопрос. Можно ли сделать так, чтобы при клике (не наведении) мыши на картинку меняли цвет определенные части фото? Пример фото могу выслать на почту, если напишите ее.
Мне очень нужен совет, поэтому буду благодарна за Ваш ответ.
Лилит =)
Либо, если возможно, делить картинку на части и к каждой части применять эффекты... либо использовать javascript... присылайте картинку, напишите что надо менять, будет время постараюсь помочь ([email protected])
Спасибо, статья помогла) Я себе ссылки-кнопки делал.
P.s. Очень редко вижу, что автор отвечает в комментах) За это огромный респект!!!))) =)
Вы очень мне помогли. Большое, от всего сердца, СПАСИБО !
Скопировала код для увеличения картинки с кодовой страницы статьи 🙂 Работает! Спасибо огромное!
Кстати, работает и в мобильной версии.
Здравствуйте,
Огромное спасибо за статью. В море безнадеги забрезжил луч 🙂
Но помогите, пожалуйста. Пытаюсь увеличить картинку — не получается. Копирую ваш код — ноль реакции. При этом изменение прозрачности картинки идет на ура. Вот на этом рубеже мозг отказывается что-либо понимать. Ведь если бы что-то было неправильно в коде, не получалось бы ничего, верно?
За увеличение отвечает свойство transform: scale (1.5), где 1.5 коэффициент увеличения... чтобы понять почему у Вас не получается, надо смотреть весь html и css код... на почту можете скинуть [email protected], будет время посмотрю
Спасибо за полезную статью. У вас в коде смены картинки после URL перед скобкой пробел. Из за него код не работает. Запарился искать причину. Ещё увеличение картинки у меня не работало. Потом посмотрю может эта же проблема.
Круто!!! Спасибо! 😀
Спасибо за эфекты *CRAZY*
Подскажите, а почему картинки могут не прогружаться? Из-за этого не работает ничего, а как исправить не знаю
путь к картинкам скорей всего указан не верно
Все замечательно работает, быстро, легко и просто. Большое спасибо! =) =) =)
Здравствуйте, а как сделать такое с тремя картинками? Хочу что бы черно-белая становилась цветной, это я понял как делать, но как сделать что бы таких картинок было 3, для каждой отдельно стиль прописывать?
Не надо для каждой прописывать. Помещаете правила стилей в класс, например класс 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">
Здравствуйте. Очень нужна помощь! Уже не знаю, где искать.
Представьте, на сайте есть картинка шкафа с закрытыми дверками. Наводишь курсор на одну дверку и она открывается, наводишь на другую и она тоже открывается. Я понимаю, что нужны 4 картинки (обе закрыты, правая открыта, левая открыта, обе открыты). Как сделать такую анимацию на сайте? Есть может быть какие-то внешние сайты (например Мегавизор для вращения на 360 градусов)? Чтобы там сделать, скопировать код и вставить на свой сайт. Спасибо.
Здравствуйте. Я сейчас делаю сайт на локальном сервере, вставляю ваш код где картинка увеличивается при наведении в корень файла 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); /* эффект трансформации для других браузеров */ }
Нужно видеть и html код... так не понять почему не работает. Возможно в теге img нет атрибута class="animate1".
Привет. А как сделать текст при наведении на картинку?
Спасибо вам большое за такое подробное и понятное описание! Удивлена, что всем отвечаете. Может, и мне повезет?) Подскажите, пожалуйста, как в предпоследнем примере сделать так, чтобы картинка опять становилась черно-белой при удалении курсора, но постепенно, с эффектом, а не сразу?
Вот код, чтобы картинка плавно появлялась и плавно исчезала:
<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;
}
Alex, Большое спасибо!
Работает. Эффект потрясающий.
Очень впечатляет =)
Почему у меня работают все коды, кроме увеличения?
<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>
Извините, не то скопировал(
<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>
Alex,добрый день!
Подскажите, как к осветлению добавить текст?
Здравствуйте! Всё ничтяк, но как можно добиться смены картинок не на одну а на разные в зависимости от положения курсора на первой картинке? Например если курсор сверху то чб вариант, если снизу то с повышенной насыщенностью, если справа то с повышенной контрастностью,слева пониженный контраст. вообщем всего пять картинок, но меняются в зависимости от положения курсора.
А можно ли чтобы это было не при наведении, а по таймингу?
отличная статья, в которой собраны все основные варианты изменения и замены картинок (изображений) при наведении мышей (ховер — hover), наверное даже лучшее описание работы с изображениями с эффектами. автор описал с подробными комментариями все основные способы, а не ограничился одним бэкграундом, как делают другие и считают что написали что-то полезное. по поводу вопросов — сомневаюсь, что автор, предоставив достаточно много и хорошо описанной информации обязан кому-то решать его проблемы, хотя и делает это. тем более что вставляя код, хотя бы лишние пропуски удаляли, чтобы не растягивать весь текст. а если Вам помогли, то наверное надо бы найти способ отблагодарить автора.
надеюсь мой. как бы СЕО текст в комментарии поможет другим легче находить данную статью.
я в точности вставил ваш код но почему то у меня не получается последний этап можете помочь
вот код
.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;/* прозрачность для других браузеров */
}
Здравствуйте! Подскажите пожалуйста, как сделать чтобы при наведении курсора например на картинку 1 которая допустим находится на правой стороне страницы, исчезала (появлялась) картинка 2 на противоположной стороне страницы.