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

Как поменять картинку при наведении css img

  • автор:

Как менять картинку при наведении курсора мыши

Как менять картинку при наведении курсора мыши

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

Многие, конечно, будут делать это на JavaScript, хотя это совершенно неразумно. Такие вещи делаются с помощью CSS и псевдоэлемента hover. Давайте с Вами поставим задачу.

У нас есть картинка. Мы хотим, чтобы при наведении на неё курсора мыши, она изменялась. Более того, мы хотим, чтобы ещё появлялась красная рамка вокруг картинки.

HTML-код очень простой:

.img background: url(«image_1.jpg») no-repeat; // Подставляем картинку по умолчанию
height: 100px; // Высота картинки
width: 100px; // Ширина картинки
>
.img:hover background: url(«image_2.jpg») no-repeat; // Подставляем ту картинку, которая будет при наведении курсора мыши
border: 2px solid #f00; // Устанавливаем красную рамку
height: 120px; // Высота новой картинки
width: 120px; // Ширина новой картинки
>

Ключевой ошибкой новичков является отсутствие свойств width и height. Без них пустой блок div просто не отобразится, поэтому не забывайте о том, что нужно указывать напрямую ширину и высоту, и они должны совпадать с шириной и высотой изображения, которое Вы подтсавляете в блок.

Данный способ является классическим, который постоянно используется для создания динамических эффектов без использования JavaScript, думаю, что Вы будете его использовать ещё не раз.

Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup

Создано 04.06.2012 12:53:28

  • Михаил Русаков
  • Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

    Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
    Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

    Если Вы не хотите пропустить новые материалы на сайте,
    то Вы можете подписаться на обновления: Подписаться на обновления

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

    Порекомендуйте эту статью друзьям:

    Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

    1. Кнопка:
      Она выглядит вот так:
    2. Текстовая ссылка:
      Она выглядит вот так: Как создать свой сайт
    3. BB-код ссылки для форумов (например, можете поставить её в подписи):

    Комментарии ( 63 ):

    soffrick 05.06.2012 11:18:12

    Еще бы не помешало познакомиться с другими псевдоклассами. А также картинку можно менять и средствами JavaScript (событие Onmouseover=»document.getElementById(‘imageID’).src=’путь к новой картинке'»)

    Admin 05.06.2012 14:27:07

    Да, по псевдоклассам обязательно напишу статью в ближайшее время. А через JavaScript такие вещи делать не нужно, и данный способ (который Вы показали) применяется в других статьях.

    soffrick 05.06.2012 16:00:53

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

    soffrick 05.06.2012 18:14:30

    Ещё бы не помешало познакомиться со спрайтами и сэкономить на дополнительных картинках 🙂

    kuller 16.06.2012 10:26:25

    на js можно зделать более интересней смену картинок. хотя сам тоже пользуюсь css

    zuryan 16.06.2012 20:14:11

    Все понятно доступно Спасибо за науку!

    lev_100rus 10.07.2012 16:44:13

    Михаил! А как сделать, чтобы при наведении на кнопку она не сразу становилась красная к примеру, а медленно начинала краснеть!))) И тоже самое при отведении мыши от кнопки? Надо сделать к примеру в фотошопе gif анимацию и в css коде указать путь.gif так?

    Admin 10.07.2012 17:40:46

    Можно и так, а можно через JavaScript это сделать.

    lev_100rus 10.07.2012 18:13:00

    На моём сайте все кнопки были сделаны при помощи js! Но как тут уже писали не у всех он включён! Переделал всё на css! Спасибо за ответ!

    setsumi 28.08.2012 14:37:46

    Здравствуйте! Я ставлю тег между тегом , чтобы при наведении курсора на ссылку менялась картинка. Проблема в том, что код становится невалидным, то есть тег не может стоять на этом месте. Подскажите, пожалуйста, как можно исправить ситуацию.

    Admin 28.08.2012 19:38:43

    Туда нельзя поставить в любом случае. Всё, что можно сделать — поставить туда

    setsumi 28.08.2012 20:32:19
    setsumi 29.08.2012 06:38:26

    Так, а при span ни картинки, ни ссылки не отображаются. Что делать?

    Admin 29.08.2012 11:53:58
    setsumi 29.08.2012 12:01:19
    Admin 29.08.2012 12:12:49
    setsumi 29.08.2012 12:24:49

    К сожалению, это не подойдет. Я пыталась так сделать, но получилась полнейшая чушь. Мне нужна ссылка картинкой, которая притом меняется при наведении на нее курсора. А так получается, что она вместе с текстом, который совершенно не нужен. Пробовала вставить картинку — та же ситуация. Я не знаю, может быть есть какой-нибудь другой способ, кроме java? Или проще оставить дивы? Я смотрела в разных браузерах, все отображается корректно, за исключением ie. Но и там, разве что картинка не меняется. Может быть, это не сильно страшно — для одного-то браузера.

    Admin 30.08.2012 22:09:03

    Если не сильно страдает кроссбраузерность, можете и оставить как есть.

    bosna 20.09.2012 01:39:31

    Михаил, подскажите пожалуйста. вот учебный сайт http://spiceboxes.ru/test-s/ Я хочу, чтобы при наведении курсора на пункты меню, они меняли цвет. но получается только рамка при наведении курсора. и еще. я прописывала hover для всех тегов «а», но такой эффект только на верхнем меню получается, для ссылок в футере это не работает (и не надо, чтоб работало, но странно, что так получается). в чем ошибки?

    Admin 20.09.2012 12:19:02

    Не работает потому, что неправильно прописываете селекторы для hover, поэтому видно только рамку внешнего элемента, или вообще не срабатывает.

    bosna 20.09.2012 12:28:06

    в чем неправильно. вроде все как положено

    Admin 20.09.2012 16:59:51

    Если работает, отлично. А если не получается задавать сразу, то проще всего менять свойства в firebug, чтобы сразу видеть результат.

    master 13.11.2012 00:54:24

    Здравствуйте Михаил. При кодировке текста сайта создаю ссылки в шапке сайта с переходом на разделы текста на этой же странице с помощью фотографий. Как сделать ссылками эти же фото, но уже на другой странице с переходом не просто на предыдущую страницу, а на эти же якоря в текстах?

    Admin 13.11.2012 06:41:54

    Не понял вопроса.

    master 13.11.2012 10:15:55

    Извините. Вопрос: Как сделать ссылку, чтобы она открывала другую страницу, но не просто страницу, а определённый текст на этой странице? И ещё, как прикрепить свой аватар в наших комментариях?

    Admin 13.11.2012 10:39:51
    master 13.11.2012 11:21:16

    Большое спасибо. А как задавать свой аватар в различных комментариях? Просто обязывает мой возраст.

    Admin 13.11.2012 11:24:35

    В каких комментариях?

    master 13.11.2012 11:34:34

    Например, я пишу этот коммент. И вместо моего аватара написано, «аватар не задан», а у Вас ваше фото и имя.

    Admin 13.11.2012 11:39:52

    В пользовательском меню перейдите по ссылке: «Редактировать профиль». Там Вы сможете загрузить аватар.

    master 15.11.2012 16:42:32

    Здравствуйте Михаил, ещё раз прошу о помощи. По вашему совету делаю так:

    — это прямо в тексте на одной странице. А это ссылка на неё с другой страницы: Не получается сделать ссылку с одной страницы на другую в соответствующее место текста. При переходе появляется страница с 404 ошибка.

    Admin 15.11.2012 17:04:09

    page.html — это пример названия страницы, у Вас она может быть index.html, about.html или page_1.html. Вы должны его заменить на своё название, тогда и не будет 404.

    master 15.11.2012 20:30:27

    Как я не догадался! Спасибо за науку. Буду продолжать изучение вашего курса «Создание сайта от А до Я» Ваша отзывчивость и готовность помочь вызывает особое уважение.

    Смена изображения при наведении курсора мышки

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

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

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

    Kwork.ru - услуги фрилансеров от 500 руб.

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

    На чем основан эффект смены изображения

    Суть всего эффекта, заключается в том, что два изображения помещаются в один блок ДИВ. Этому блоку присваивается класс или идентификатор и каждому изображению также присваивается свой класс. А далее используя эти классы, создаются css стили для смены одного изображение на другое, при наведении курсора мышки. И достигается это за счёт свойства прозрачности (opacity).

    Подготовка html каркаса для изображения

    Итак, в том месте где вы хотите создать этот эффект вам необходимо вставить вот такой html каркас:

     
    ссылка на первое изображение" width color: #ff6600;">100px" height color: #ff6600;">100px" alt="" > ссылка на второе изображение" width color: #ff6600;">100px" height color: #ff6600;">100px" alt="" >

    где вы, разумеется, меняйте ширину, высоту и ссылки на изображения.
    А дальше можно переходить к созданию css стилей.

    Создание css стилей

    В качестве первого примера возьмём вот такие изображения:

    Пример кнопки 1 Пример кнопки 2

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

    Сначала я размещаю html каркас с указанием путей к файлам и их размеров:

     

    Для достижения нужного эффекта в файл таблицы стилей нужно добавить вот такие стили:

    /*Свойства для контейнера*/ #img_container < position:relative; height:114px; width:300px; margin:0 auto; cursor:pointer; >/*Свойства для изображения в контейнере*/ #img_container img < position:absolute; left:0; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; >/*100% прозрачность при наведении на изображение*/ #img_container img.img_bottom:hover

    Кстати, в свойствах контейнера ширину и высоту можно выставить в процентах, но в таком варианте свойство margin:0 auto; теряет свою актуальность. В общем, в зависимости от того где будете использовать вставку изображений, применяйте и соответствующие свойства.

    Если плавная смена изображений вам не нужна, уберите эти свойства, или смените интервал:

    -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out;

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

    А теперь посмотрите видеоурок, где я показываю как работает этот эффект и ещё одна разновидность этого эффекта. Когда изображение меняется с помощью вращения.

    Вот и всё простой эффект готов, берите на вооружение и применяйте в своих проектах. Желаю удачи! И до встречи в новых статьях.

    А вот обещанный в видеоуроке архив.

    Крутой эффект изменение картинки на CSS

    Крутой эффект изменение картинки на CSS

    Как поняли, это здесь мы задействовали 2 изображение, где под номером один или при открытии страницы видим черно-белую картинку, как только курсор наводим на основу картинки, как автоматически меняем на цветной рисунок, где даже получается красивый эффект, в том случай, если изображение аналогичны, только разная палитра цветов. Но самый вкус являться в том, что происходящая смена происходит в плавном режиме, а не мгновенно, как многие подумали. Одно из главных, здесь не задействован Javascript.

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

    Создать смена картинки на другую при наведении курсора на чисто CSS

    Здесь как можно заметить, что не так сложно, как изначально может показаться. У нас находиться каркас, где прописаны ссылка на 2 изображения с классами kuneda и vselan.


    #karkas_ckuna <
    position:relative;
    height:385px;
    width:180px;
    margin:0 auto;
    cursor:pointer;
    >

    #karkas_ckuna img <
    position:absolute;
    left:0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
    >

    #karkas_ckuna img.vselan:hover <
    opacity:0;
    >

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

    Если интересно, как все работает:

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

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

    IMG: меняем рисунок при наведении

    Одна из часто встречающихся задач при верстке — смена фона элемента при наведении мыши. Уверен, если речь идет о background, то проблем у тебя не возникнет. Хорошим решением будет подклеить картинки по методу спрайтов и по hover менять background-position. Тут нужно только не забыть, что IE6 не понимает hover для элементов не являющихся ссылками и ему нужно будет помочь.

    А что если нужно менять не фоновый рисунок, а img? Например, какой-нибудь баннер при наведении как-то хитро подсвечивается? Трюк с background-position тут не пройдет. Нужно другое решение. Менять скриптом src? А может можно обойтись силами CSS?

    Задача

    Реализовать средствами CSS смену рисунка при наведении мыши. Рисунок расположен в img.

    Решение

    Склеиваем картинки, как в методе спрайтов:

    верхний рисунок — обычный вид, нижний — при наведении

    HTML код типичный для баннера — img внутри ссылки (естественно можно использовать не только ссылку, но и другой подходящий по смыслу элемент).

    При наведении просто смещаем картинку вверх с помощью отрицательного margin-top.

    .container < width:120px; height:120px; /* высота видимой части (одной картинки) */ display:block; overflow:hidden; /* чтобы нижнюю картинку не было видно */ >.container:hover img

    Ключевой момент: margin-top должен быть численно равен высоте видимой части картинки.

    Ослиные костыли

    К сожалению IE6 не поймет конструкцию «.container:hover img». Для него придется добавить expression (подробнее этот момент смотри в статье Псевдокласс hover в IE6).

    * html .container< behavior: expression( onmouseover = function() , onmouseout = function() , style.behavior = null ); > * html .hover img

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

    • IE 6-8
    • Firefox 3.0-3.6
    • Opera 9.5-10.5
    • Safari 4
    • Chrome 5

    Убираем expression (update by SelenIT)

    Если контейнером является ссылка, то можно обойтись и без expression! У IE6 есть старый баг, что он иногда ленится перерисовывать содержимое ссылок под :hover-ом. Но если указать отдельно для .container:hover стиль, который явно даст понять IE, что ссылку надо перерисовать (подходит font-size:100%, background:#fff и подобные свойства), то и стиль для .container:hover тоже магическим образом начнет применяться.

    То есть решение может выглядеть, например, так:

    .container < width:120px; height:120px; display:block; overflow:hidden; >.container:hover < font-size:100%; /* специально для IE6 */ >.container:hover img

    Еще один метод — ни expression, ни дополнительного правила для IE6 (update by Татьяна Шкабко)

    Другое решение задачи можно получить, если сдвигать картинку не с помощью margin, а с помощью text-indent. Саму картинку тогда нужно склеить немного иначе:

    слева — обычный вид, справа — при наведении

    .container < width:120px; height:120px; display:block; overflow:hidden; >.container:hover

    Так как правило для hover упростилось, «пинать» IE6 нет необходимости. Конечно, если контейнер не ссылка, то, как и в предыдущем варианте, без expression не обойтись!

    • IE 6-8
    • Firefox 3.0-3.6
    • Opera 9.5-10.5
    • Safari 4
    • Chrome 5

    Материал

    • CSS Sprites w/out Using Background Images
    • CSS приемы
      • «Дергание» сайта
      • background position со смещением
      • clearfix
      • CSS прозрачность
      • CSS хаки
      • RGBA — CSS полупрозрачность
      • Затемнение фона
      • Кроссбраузерный

      • Обнуление отступов
      • Порядок описания ссылок
      • Прелоад изображений
      • Сброс стилей
      • Сокращения в CSS
      • Убираем рамку с эл-ов в фокусе
      • Условные CSS
      • Условные комментарии
      • Поворот вокруг своей оси
      • Поворот объекта вокруг свой
      • Resize для textarea в Safari и Chrome
      • Блочная верстка форм
      • Кастомные checkbox и radio на CSS
      • Кросбраузерные input и textarea
      • Кроссбраузерный button
      • Нестандартные checkbox
      • Нестандартные radio
      • Нестандартные select
      • Нестандартные select multiple
      • Нестандартные поля выбора файла
      • Нестандартные текстовые поля
      • О кроссбраузерности placeholder
      • Отступы у checkbox и radio
      • Оформление input type=search
      • Резиновая кнопка
      • Текст в поле type=»password»
      • Блоки равной высоты в строке
      • Колонки равной высоты
      • Прижимаем подвал к низу
      • Ресайз окна: потомок перерос родителя
      • Сайт в центре экрана
      • Фиксированная колонка + резиновая + clear:both
      • CSS 3D лента
      • CSS3 всплывающие подсказки
      • IMG внутри блока — убираем странный отступ
      • IMG: меняем рисунок при наведении
      • Аккордеон на чистом CSS3
      • Валидный target=»_blank»
      • Верстка рейтингов
      • Верстка содержания
      • Вставка спецсимволов в генерируемый контент
      • Вставка стрелок
      • Индивидуальные стили для li. Избавляемся от классов.
      • Масштабируемая картинка в резиновой колонке
      • Многоколоночный текст на CSS3
      • Нестандартное подчеркивание
      • Отменяем обтекание текстом картинки
      • Оформление внешних ссылок
      • Оформление изображений по align
      • Оформляем «ol»
      • Правильные анонсы новостей
      • Список определений. Требуем невозможного.
      • Firefox
        • -moz-box-shadow и -moz-border-radius — это кошмар CPU
        • Позиционирование внутри button
        • Ширина input type=file
        • Onload в IE9
        • z-index в IE6-7
        • Баг с текстом при применении Alpha фильтра
        • Масштабирование и PIE
        • Отступы в кнопках в IE6-7
        • Проблемы с em
        • Эмуляция after и before для IE 6-7
        • Эмуляция data:URL для IE6-7 — используем MHTML-включение
        • hasLayout
        • Max-width
        • Min-height
        • Min-width
        • Min-width и max-width одновременно
        • PNG и прозрачность
        • Высота блока 1px
        • Дублирование символов
        • Дырка под футером
        • Как перекрыть select
        • Обрезка контента c отрицательным margin в IE6
        • Отступы плавающих блоков
        • Проблемы с размерами блоков
        • Псевдокласс :first-child
        • Псевдокласс hover в IE 6
        • Селектор потомков >
        • Селекторы атрибутов [type=…]
        • Сестринский селектор
        • Смещение на 1px
        • Ссылки с вложением
        • Устраняем flickering
        • Эмуляция position:fixed
        • overflow-y
        • Не подгружаются шрифты @font-face
        • Проблема с oveflow: hidden
        • Скругление img
        • HTML шаблон для мобильных устройств
        • Выпадающее меню на CSS
        • Выравнивание навигации из блоков по центру
        • Выравнивание навигации по середине
        • Резиновое меню
        • Резиновое меню из блоков
        • Убираем класс для первого элемента
        • Box-sizing: переключаем блочную модель
        • inline-block: простое свойство для непростых задач
        • Вертикальная позиция для строчного элемента
        • Вертикальное выравнивание
        • Выравнивание по центру с position: absolute
        • Вычисляемые отступы
        • Два в одном: позиция + размеры
        • Долой отступы между строчными элементами (и блоками)
        • Обходим схлопывание margin
        • Центрирование картинки в блоке
        • Центрирование резинового блока по горизонтали
        • Активация flash
        • Вставка flash в HTML
        • Вставляем ролик с YouTube
        • Как отключить flash
        • Как перекрыть flash
        • Параметры для вставки объектов
        • Ссылка на flash объекте
        • CSS треугольники
        • Аппаратное ускорение анимации
        • Встраиваем изображения — data:URL
        • Градиент: CSS3 против CSS2 + картинка
        • Лесенка спрайтов — сложный случай поклейки
        • На одну картинку меньше. Спецсимвол ×
        • Необычные тени с CSS3 box-shadow
        • Оптимизация Google Web Fonts
        • Оптимизация фонов с помощью Canvas
        • Проблемы с border-radius
        • Псевдоэлемент before для маркера списка
        • Скругление углов. Обзор методов.
        • Сокращаем HTML5 код
        • Спрайты: меньше картинок — больше скорость
        • Тень для блока
        • Фигуры с углами на CSS
        • Шаблоны градиентов
        • Дополнение Skype
        • Подключить favicon
        • Профилактика сайта: максимально простое оповещение
        • Ссылки на skype
        • @font-face в деталях
        • Cufon — нестандартный шрифт средствами JS
        • font-size: 100.01% для html
        • Безопасные шрифтовые CSS стеки для англоязычных текстов
        • Безопасные шрифтовые CSS стеки для рунета
        • Безопасные шрифты
        • Вертикальный текст
        • Используем псевдоэлемент :first-letter
        • Контур для текста
        • Нестандарный шрифт. Быть ему или нет?
        • Нестандартный шрифт средствами CSS
        • Плавающий :first-letter
        • Подмена текста изображением
        • Соответствия шрифтов Windows, Mac и Unix/Linux
        • Строчный :first-letter
        • Текст под углом
        • Текст с CSS градиентом
        • Тень для текста
        • Эффект отражения

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

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