Изменение картинки при наведении css

Самый простой вариант

Второй вариант, когда при наведении на картинку, она меняется

Третий вариант

55 комментариев:

Morskaia Супер вещь:) Евгений Объясните, куда нужно вставлять те коды, которые вы приводите
Крутая вещь. NMitra Потренируйтесь сначала в теле сообщения (при написании/редактировании сообщения) на вкладке "HTML". В дальнейшем, если какой-либо вариант планируете распространить на все страницы, то стили CSS — код между

без тега style можно внести согласно этой статье http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html WeB XaSeR Оригинальны 3 и 5 варианты, прикольно.. А с кроссбраузерностью как? NMitra IE пока не поддерживает, в следующей версии (-ms-). NMitra Смена картинки будет происходить, только без эффектов. Ellis_Wood Это что-то новенькое!! класно=) Ольга У. Просто супер! Черников Александр Спасибо! admin У вас в примере две фотки, попробовал добавить 3 фотку, а показывает все равно две. NMitra Всё верно. Одна картинка становится прозрачной, поэтому становится видна нижняя. Я не ставила перед собой цели сделать фотогалерею. Посмотрите здесь http://www.cssplay.co.uk/menu/click-gallery-previous-next.html, http://www.cssplay.co.uk/menu/cssplay-any-size-gallery.html . А стили можно добавить любые. Анонимный Спасибо! Все получилось! NMitra Рада слышать. Ольга Корчёмкина Красота! Спасибо большое за идею! Буду использовать при необходимости. Оксана Все это очень интересно! Но у меня почему-то не получилось. Что я делаю не так? Вроде все просто. NMitra Подробнее: страница где пробуете, какие картинки, что хотите добиться? NMitra Мне нужно наглядно увидеть что вы делаете. Ольга Спасибо за подробное описание, только не понятно, куда нужно этот скрипт вставить? Если на страницу с картинкой, то ничего не получается. NMitra При написании статьи, вкладка "HTML". Добавьте код, напишите в комментариях страницу, где внесли изменения. Только тогда я смогу понять почему не получается. Марина Подскажите, пожалуйста, что делать для того, чтобы поверх меняющейся картинки получилось разместить "неменяющуюся"? Придумала такой дизайн — а вот теперь релизовать не получается. Помогите, пожалуйста! NMitra Одной из картинок прописать псевдоэлементы с content: url(); — http://shpargalkablog.ru/2012/02/before-after-css.html Анонимный Помогите пожалуйста,решил вставить картинки первым способом, вставил 1 картинку с пареходом на вторую.

Захотел на той же странице еще вставить картинки, вставил другие совсем картинки НО ПОКАЗЫВАЮТ ДВЕ ПЕРВЫХ хотя в коде ссылки на другие картинки.

Как это исправить?

Александр, ICQ:387818339 NMitra Заменить

Подробнее http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html Асиля Крутоо:))) NMitra Согласна))) Ефименко Владислав Я новенький в этом деле) Не могли бы вы подсказать почему картинки не меняются плавно, как у вас? NMitra Мне нужно увидеть что вы для этого сделали. Покажите страницу. Lina А у меня получаются 2 картинки рядом, или одна и не меняется. Lina А в первом примере вообще ничего не появляется. NMitra Покажите страницу с вашими экспериментами. Lina http://karen.arte-madeira.com.pt/# NMitra Вы стили CSS не прописываете. Не знаю вашу платформу, но, как правило, есть переключатель на HTML версию статьи. Код следует добавить именно там. Анонимный Подскажите, пожалуйста, а можно сделать так, чтобы при наведении картинка увеличивалась и сменилась на другую в этот момент как на сайте мегафона внизу? NMitra На скорую руку http://shpargalkablog.ru/2013/06/css.html
Если не нужна тень у картинок, то есть получиться ещё проще Анонимный агроменское спасибо Анонимный Спасибо. всё работает)) Sineoka Огромное спасибо. Так долго искала код, и только ваш заработал)) NMitra Рада, что всё удалось ) jeka Ели на одной странице несколько изображений с разными эффектами переходов, то все работают с эффектом последней картинки — почему, и как это исправить?
Заранее спамибо! NMitra для каждого эффекта свой

и следовательно
.izo1 img.raz <
-moz-transform:scale(0);
-webkit-transform:scale(0);
-o-transform:scale(0);
-ms-transform:scale(0);
> jeka Дело в том, что я чайник в CSS, не получается разобраться в Вашем ответе. Покажите пожалуйста на примере, буду премного благодарен. Хотел для примера загрузить то, что у меня — не получается. Какой то недопустимый тег.
Где что на что менять ума не приложу.
Спасибо что помогаете таким как я! jeka Простите за назойливость.
Сделал так: > где 1;2;3 для разных эффектов
Соответственно в css там где demo то же проставил для разных эффектов 1;2;3
Все работает. NMitra С селекторами лучше разбираться на http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html
Наоборот, хорошо, что отписались! Kate Donskaya Здравствуйте, я новичок совсем)
подскажите пожалуйста,можно ли делать эффект перекатывания не с картинкой, а с текстом, и как?
Заранее спасибо большое!!)) Kate Donskaya И еще вопрос: по этому уроку с картинками все получилось, но как мне сделать эту картинку ссылкой на страницу? дело в том, что когда я вставляю адрес ссылки после значения href="#", она работает, но некорректно: открывается указанная в ссылке страница прямо в поле с кодом! (с полями прокрутки по бокам)(((. NMitra Здравствуйте, измените html

Dmitry Khramov Super! NMitra Благодарю ) Serge Pol а плгины для ВП эсть такие??
NMitra Мне это не известно, предпочитаю чистый код JS или PHP Анонимный Скажите, как сделать чтобы одна картинка накладывалась на другую, т.е. чтобы первая не исчезала? NMitra См http://jsfiddle.net/NMitra/tqdfsytp/2/
Теория http://shpargalkablog.ru/2011/04/css-nalozhenie.html Unknown Я неправильно вопрос задал. Как сделать, чтобы при наведении на картинку появлялась другая картинка, при этом первая не исчезала. Хочу сделать светящуюся тень при наведении на картинку.

1-й вариант, делаю две разные картинки — "тень" и "картинка", тогда при наведении тень остается, а картинка исчезает.

2-й вариант, делаю две картинки, "картинка с тенью" и "картинка без тени", тогда при первом наведении исчезают обе картинки, только через несколько секунд начинает нормально работать. Даже если сайт был загружен 10 минут назад.

Задача

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

Решение

Смена одной картинки на другую при наведении на неё курсора мыши называется эффектом перекатывания. Обычно для создания эффекта перекатывания применяется 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 и html, совершено простым образом, без всяких применений javascript. Для этого нам нужно, две картинки как Вы уже поняли, одна активная, а другая пассивная. При наведении на картинку, она меняется на другую, принцип действий очень прост и понятен.

Далее нам потребуются два файла index.php и style.php.

Первая часть. HTML.

В нем мы просто прописываем ссылочку с классом images.

Вторая часть. CSS.

В классе a.images, прописываем путь к пассивной картинке, указываем ее как блочный элемент, устанавливаем ширину и высоту картинки. В классе a.images:hover мы только прописываем путь к активной картинке.

Вывод:

Думаю данный урок даст широкий спектр возможностей и применений, ведь данная технология по применению смены картинки при наведении курсора очень проста в реализации. Плюсы: скрипт простой и использует только css и html. Минусы: любая картинка имеет свой вес, а также ее нужно будет создавать в графической программе. Большое спасибо Вам за внимание и проявленный интерес к данному уроку!