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

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

Вопрос задан 6 лет 5 месяцев назад

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

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

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

.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

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

.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

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

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

Почта

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

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

Почта

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

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

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

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

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

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

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

Содержание

1. На чем основан эффект смены изображения
2. Подготовка html каркаса для изображения
3. Создание css стилей

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

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

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

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

<div>
<img src="ссылка на первое изображение" alt="">
<img src="ссылка на второе изображение" alt=""></div>

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

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

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

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

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

<div>
<img src="/button2.
 
 png" alt="">
<img src="/button1.jpg" alt="">
</div>

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

/*Свойства для контейнера*/
#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 {
opacity:0;
}

Кстати, в свойствах контейнера ширину и высоту можно выставить в процентах, но в таком варианте свойство 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

7 месяцев назад

от Sharqa Hameed

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

Целью этого руководства является изучение того, как изменить изображение при наведении с помощью CSS. Итак, начнем!

:hover — это элемент псевдокласса, используемый для изменения состояния HTML-элементов при срабатывании мыши. Этот селектор CSS в основном используется для стилизации или выбора элементов. Однако его нельзя применить к ссылкам.

Синтаксис

Ниже приведен синтаксис :hover:

element:hover {

Код CSS. . .

}

Здесь « элемент » относится к элементу, к которому вы хотите применить эффект наведения.

Теперь мы перейдем к практическому примеру изменения изображения при наведении с помощью CSS.

Чтобы сначала изменить изображение при наведении, добавьте два изображения в раздел HTML. Первое изображение для активного состояния, а следующее — для состояния наведения.

Для указанной цели мы добавим два изображения, « image1 » и « image2 », и присвоим второму изображению имя класса « hover_img ».

HTML

Теперь перейдите к CSS, чтобы установить положение обоих изображений, используя свойство « position ». Мы установим его позицию как « absolute », чтобы позиционировать его абсолютно по отношению к его ближайшему родителю.

CSS

.img {

позиция: абсолютная;

}

Это покажет следующий результат:

На следующем шаге мы поместим второе изображение перед первым. Для этого мы установим положение изображения как « absolute », а верхнее и левое положение — как « 0 ». С помощью этого изображение помещается перед первым изображением, но мы хотим отображать второе изображение при наведении на него курсора мыши. Таким образом, установив отображаемое значение как « none » покажет желаемый результат:

.hover_img {

position: absolute;

верх: 0;

слева: 0;

дисплей: нет;

}

Вывод данного кода выглядит следующим образом:

Второе изображение успешно скрыто за первым изображением.

Теперь перейдите к следующему шагу.

Затем используйте «: hover » и выберите « .img 9».0012», чтобы применить наведение к выбранному элементу. Затем назначьте имя класса второго изображения « .hover_img ». После этого внутри круглых скобок установите значение свойства display как « inline », что заставит элемент разместиться в одной строке:

.img:hover .hover_img {

display: inline;

}

Вот результат, демонстрирующий изменение изображения при наведении на него курсора:

Приведенный выше вывод показывает, что мы успешно изменили изображение при наведении курсора с помощью CSS.

 .ребенок {
максимальная ширина: 50%;
должность: родственница;
}

.детское изображение {
дисплей:блок;
непрозрачность:1;
высота: авто;
переход: легкость .6s;
ширина:100%;
положение: абсолютное;
z-индекс: 12;
}
.детское изображение: наведение {
непрозрачность:0;
}
.детское изображение + изображение {
дисплей:блок;
непрозрачность:1;
должность: родственница;
z-индекс: 10;
} 

 <дел>