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

Leave a Comment / Css / By /

html — Смена картинки при наведении

Вопрос задан

Изменён 6 лет 2 месяца назад

Просмотрен 9k раз

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

.izo {
display: inline-block;}

a.izo:hover {
background: url("other_pic.png") no-repeat 50% 50%;}
<a href="/add/"><img src="/pic.png"></a>
  • html
  • css
  • Тегу img нельзя применить свойство background!
  • У тега img уже по-умолчанию задано display: inline-block;

Можно применить смену фоновых изображений к ссылке.

Как один из возможных вариантов:

a {
  display: inline-block;
}

img {
  transition: all .3s ease;
}

a:hover img {
  opacity: 0;
}

a:hover {
  background: url("http://wpguru.co.uk/wp-content/uploads/2013/09/CSS-Logo-214x300.png") no-repeat 50% 50%;
}
<a href="/add/">
  <img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png">
</a>

1

Вы картинку на HTML добавляете через img src, а пытаетесь изменить свойство background в CSS

Вам нужно картинку добавлять с помощью CSS в класс izo

.izo {
    display: inline-block;
    background: url("pic.png") no-repeat 50% 50%;}
}
a.izo:hover {
    background: url("other_pic.png") no-repeat 50% 50%;
}

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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

  • Вопросы
  • Горячие
  • Пользователи
  • Вход/Регистрация

>

Категории вопросов

Задать вопрос +

Основное

  • Вопросы новичков (16495)
  • Платные услуги (2125)
  • Вопросы по uKit (82)

Контент-модули

  • Интернет-магазин (1432)
  • Редактор страниц (236)
  • Новости сайта (498)
  • Каталоги (806)
  • Блог (дневник) (112)
  • Объявления (295)
  • Фотоальбомы (433)
  • Видео (255)
  • Тесты (60)
  • Форум (576)

Продвижение сайта

  • Монетизация сайта (220)
  • Раскрутка сайта (2455)

Управление сайтом

  • Работа с аккаунтом (5316)
  • Поиск по сайту (426)
  • Меню сайта (1765)
  • Домен для сайта (1532)
  • Дизайн сайта (13466)
  • Безопасность сайта (1478)
  • Доп.
    функции (1308)

Доп. модули

  • SEO-модуль (225)
  • Опросы (63)
  • Гостевая книга (99)
  • Пользователи (432)
  • Почтовые формы (318)
  • Статистика сайта (197)
  • Соц. постинг (212)
  • Мини-чат (91)

Вебмастеру

  • JavaScript и пр. (644)
  • PHP и API на uCoz (235)
  • SMS сервисы (10)
  • Вопросы по Narod. ru (427)
  • Софт для вебмастера (39)
  • Вопросы
  • Дизайн сайта
  • Как менять картинку при…

голоса: +2

 

Лучший ответ

Прочитайте http://htmlbook. ru/faq/kak-sdelat-chtoby-kartinka-menyalas-pri-navedenii-na-nee или уточните вопрос

Вот примеры смены картинок при наведении с различными эффектами http://shpargalkablog.ru/2012/01/pri-navedenii-na-kartinku-ona.html

| Автор: webanet
Выбор ответа лучшим | | Автор: Yuri_Geruk

…

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

Улучшить статью

Сохранить статью

  • Уровень сложности: Средний
  • Последнее обновление: 26 ноя, 2020

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    Подход, описанный в этой статье, заключается в изменении изображения, когда пользователь наводит на него указатель мыши. Эту задачу можно легко выполнить, используя свойство CSS background-imag e в сочетании с: hover псевдокласс для замены или изменения изображения при наведении курсора.

    Example:

    < html lang = "en" >

       

    < головка >

         < название >

             How to Change Image on 

             Hover in CSS

         title >

           

         < style >

             . sudo {

                 ширина: 230 пикселей;

                 высота: 195 пикселей;

                 поле: 50 пикселей;

                 background-image: url(

             }

       

             .sudo:hover {

                 background-image: url(

    }

         стиль >

    head >

       

    < body >

         < h3 >GeeksForGeeks h3 >

    < H3 >

    Как изменить изображение на

    . 0038

             hover with CSS

         h3 >

       

         < div class = "sudo" > Div >

    Body >

    HTML 9003

    700380038 >

    Выход:

    Перед наведением мыши над изображением:

    после падения мыши.

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

    • Статьи по теме

    Что нового

    CSS

    Как создать эффект наложения изображения при наведении?

    Как создать эффекты наложения изображения при наведении с помощью CSS?

    Как создать эффекты наложения изображения при наведении с помощью CSS?

    Обзор

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

    • Исчезновение
    • Скользящая крышка
    • Нижний слайд
    • Слайд влево
    • Слайд вправо

    Предварительные требования

    Изучение основ CSS

    Изучение основ HTML

    Как создать эффект наложения изображения при наведении с помощью CSS?

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

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

    Давайте создадим базовый HTML-код, содержащий изображение.

     
     

<голова>
    <мета-кодировка="UTF-8">
    Масштабирование изображения при наведении курсора

<тело>
   <центр>

    Вывод:

    Типы эффектов при наведении в CSS

    Fade

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

    Пример Fade эффект:

     
     

<голова>
    <мета-кодировка="UTF-8">
    Наложение изображения
    <стиль>
    .контейнер
    {
       положение: родственник;
       ширина: 250 пикселей;
       высота: 250 пикселей;
       отображение: встроенный блок;
    }
    .изображение
    {
       дисплей: блок;
       ширина: 250 пикселей;
       высота: 250 пикселей;
    }
    .оверлей
    {
       положение: абсолютное;
       переход: все .3s легкость;
       непрозрачность: 0;
       цвет фона: #eee;
    }
    .container: наведение .overlay
    {
       непрозрачность: 1;
    }
    .эффект наложения
    {
      ширина: 250 пикселей;
      высота: 250 пикселей;
      верх:0;
      слева: 0;
      цвет фона: #00b1ba;
    }
    


<тело>
<дел>
    img
    <дел>

    Результат:

    Slide Top

    Здесь мы создаем Slide Top эффект наложения при наведении. Здесь ширина изображения установлена ​​​​на 250 пикселей, высота установлена ​​​​на верх и ноль. Когда мы наводим курсор на изображение, эффект наведения будет постепенно перемещаться сверху вниз.

    Пример эффекта Slide Top :

     
     

<голова>
    <мета-кодировка="UTF-8">
    Наложение изображения
    <стиль>
        .контейнер изображения {
            ширина: 250 пикселей;
            высота: 250 пикселей;
        }
        .контейнер {
            положение: родственник;
            ширина: 250 пикселей;
            высота: авто;
        }
        .оверлей {
            положение: абсолютное;
            переход: все 0,3 с легкости;
            непрозрачность: 0;
            цвет фона: #eee;
        }
        .container: наведение .overlay {
            непрозрачность: 1;
        }
        .overlayTop{
            ширина: 250 пикселей;
            высота: 0;
            сверху: 0;
            справа: 0 пикселей;
            цвет фона: #00b1ba;
        }
        . container: наведение .overlayTop{
        высота: 250 пикселей;
        }
    

<тело>
        <дел>
            
            <дел>

    Результат:

    Slide Bottom

    Здесь мы создаем Slide Bottom эффект наложения при наведении. Здесь ширина изображения установлена ​​​​на 250 пикселей, высота установлена ​​​​на низ и ноль. Когда мы наводим курсор на изображение, эффект наведения будет постепенно перемещаться снизу вверх.

    Пример эффекта Slide Bottom :

     
     

<голова>
    <мета-кодировка="UTF-8">
    Наложение изображения
    <стиль>
        .изображение {
            ширина: 250 пикселей;
            высота: 250 пикселей;
        }
        .контейнер {
            положение: родственник;
            ширина: 250 пикселей;
            высота: авто;
        }
        . оверлей {
            положение: абсолютное;
            переход: все 0,3 с легкости;
            непрозрачность: 0;
            цвет фона: #eee;
        }
        .container: наведение .overlay {
            непрозрачность: 1;
        }
        .overlayBottom{
            ширина: 250 пикселей;
            высота: 0;
            внизу: 0;
            справа: 0 пикселей;
            цвет фона: #00b1ba;
        }
        .container: hover .overlayBottom {
        высота: 255 пикселей;
        }
    

<тело>
        <дел>
            
            <дел>