Как сделать смену картинки при наведении css
Перейти к содержимому

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

  • автор:

При наведении на картинку, она меняется

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

То же самое можно оформить с помощью прозрачности фона. Только здесь тег a не пустует.

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

Или благодаря тому, что размещаем один элемент под другим с помощью position: absolute (см. vagabundia.blogspot.com).

Добавив свойство transition в последнем примере, изменения будут происходить более плавно.
.demo img

На метлеВедьмочка

Пункт 3.1. Здесь же можно внести свойство transform.
.demo img.raz < -moz-transform:scale(0); -webkit-transform:scale(0); -o-transform:scale(0); -ms-transform:scale(0); >.demo:hover img.raz < -moz-transform:scale(1); -webkit-transform:scale(1); -o-transform:scale(1); -ms-transform:scale(1); >.demo:hover img.dva

На метлеВедьмочка

Пункт 3.2. Или так.
.demo img.raz < -moz-transform:scale(1,0); -webkit-transform:scale(1,0); -o-transform:scale(1,0); -ms-transform:scale(1,0); >.demo:hover img.raz < -moz-transform:scale(1); -webkit-transform:scale(1); -o-transform:scale(1); -ms-transform:scale(1); >.demo:hover img.dva

На метлеВедьмочка

Пункт 3.3. А можно воспользоваться свойством margin.
.demo < overflow:hidden; >.demo img.dva, .demo:hover img.raz < margin-top: 0px; >.demo:hover img.dva < margin-top: 400px; >.demo img.raz

На метлеВедьмочка

Пункт 3.4. Главное, чтоб фантазии хватило.
.demo < overflow:hidden; >.demo img.dva, .demo:hover img.raz < margin: 0px; >.demo:hover img.dva < margin-top:400px; margin-left:400px; -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg); >.demo img.raz

На метлеВедьмочка

Последний предложенный Пункт 3.5. будет в разных браузерах отображаться по разному при наведении на картинку курсора, поскольку нет единой договорённости относительно сочетания transform: translate и transform-origin. Мне нравится больше вариант в Mozilla Firefox.

.demo:hover img.dva < -moz-transform: translate(250px, -1400px) scale(0.5, 0.5); -webkit-transform: translate(250px, -1400px) scale(0.5, 0.5); -o-transform: translate(250px, -1400px) scale(0.5, 0.5); -ms-transform: translate(250px, -1400px) scale(0.5, 0.5); -moz-transform-origin: 0px 2700px; -webkit-transform-origin: 0px 2700px; -o-transform-origin: 0px 10000px; -ms-transform-origin: 0px 2700px; opacity:0.3;filter:alpha(opacity=0.3);>.demo:hover img.raz

Ведьмочка
На метле

На www.cssplay.co.uk дан более трудоёмкий способ.
Возможно вы искали вариант, когда при наведении на картинку, она увеличивается.

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 class=»demo» для каждого эффекта свой
class=»demo izo1″
class=»demo izo2″
и следовательно
.izo1 img.raz -moz-transform:scale(0);
-webkit-transform:scale(0);
-o-transform:scale(0);
-ms-transform:scale(0);
> jeka Дело в том, что я чайник в CSS, не получается разобраться в Вашем ответе. Покажите пожалуйста на примере, буду премного благодарен. Хотел для примера загрузить то, что у меня — не получается. Какой то недопустимый тег.
Где что на что менять ума не приложу.
Спасибо что помогаете таким как я! jeka Простите за назойливость.
Сделал так: href=»#»> где 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 минут назад.

Как заменить изображение при наведении на него курсора? CSS

Многие из Вас ещё, независимо от знаний вёрстки и программирования, сталкивались с
заменой изображения при наведении на него. Самый частый пример — наведение курсора мыши на кнопку. В результате картинка менялась, возможно даже в размерах и форме. В данной статье я покажу как можно заменить изображение, изменить его размер при наведении на него, используя только CSS.

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

Что будем использовать? Нам достаточно псевдоэлемента hover и свойства background. Из файлов это сам html файл и изображение.

В реализации всё просто. Код состоит из двух частей:

1. html с нужным div

Код HTML

 2. свойства css для div

Код CSS

.img background: url("image001.jpg") no-repeat; /* изображение по умолчанию */ 
height: 120px; /* высота изображения */
width: 120px; /* ширина изображения */
>
.img:hover background: url("image002.jpg") no-repeat; /* новое изображение */
border: 2px solid #f00; // Устанавливаем красную рамку
height: 120px; /* высота изображения */
width: 120px; /* ширина изображения */
>

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

Демонстрация Скачать исходники
Как вы видите на примере, изображение, указанное по умолчанию (то есть image001), появляется при загрузке страницы, а image002 только при наведении курсора на первое изображение.

Внимание! Нужно обязательно указывать ширину и высоту блока, в противном случае div просто не отобразится. Также будьте внимательны с указанием точных размеров блока, так как изображение внутри не будет масштабировано, так как оно считается фоновым. Если размеры блока будут меньше, то и видна будет только часть изображения.

Чаще всего используется именно такой способ смены изображения. Если хотите заменить изображение в других случаях, например, при клике, то использовать надо уже не hover , а active .

Да, существуют и другие способы заменить изображение: JS, библиотека jQuery, CSS3, но о них я напишу в статьях в соответствующих разделах.

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

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

Решение

Смена одной картинки на другую при наведении на неё курсора мыши называется эффектом перекатывания. Обычно для создания эффекта перекатывания применяется 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бб

Рис. 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

Плавная смена картинок при наведении курсора

2015-03-26T10:03 26 мар 2015 10:03
Просмотров: 12996

Плавная смена картинок при наведении курсора

Рассмотрим плавную смену картинок при помощи CSS и HTML.

Данный метод работает на:

  • Internet Explorer — 10+
  • Chrome — 26.0+
  • Opera — 12.10+
  • Safari — 3.0+
  • Firefox — 16.0+
  • Android — 2+
  • iOS — 2.1+

CSS

.image.first,.image.second < border:2px solid transparent; margin:0; padding:0; >.image.first < opacity:1px; display:block; position:absolute; z-index:100; transition-duration:0.96s; -webkit-transition-duration:0.96s; -moz-transition-duration:0.96s; -o-transition-duration:0.96s; -ms-transition-duration:0.96s; >.image.first:hover < opacity:0.00; >div.ImgField

html

А это туда где желаете видеть картинки

<div src color:red">ссылка на картинку 1"/> <img src color:green">ссылка на картинку 2"/> </div> <div src color:red">ссылка на картинку 1"/> <img src color:green">ссылка на картинку 2"/> </div>
  • ссылка на картинку 1 — видимая картинка
  • ссылка на картинку 2 — картинка появляющаяся при наведении курсора

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

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