Верстка

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

🗓️ Обновлено: 15.08.2022
💬Комментариев: 0
👁️Просмотров: 4772

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

Готовый пример:

Объяснение. Как мы сделали, чтобы картинка менялась при наведении? Мы в HTML код сразу добавили две картинки, но одну скрыли с помощью :nth-of-type(2). Затем при наведении (hover) на родительский элемент, мы первую картинку скрываем (display: none), а вторую наоборот показываем, задавая ей display: block;

Статья была полезной?
👍
Да - 16
👎
Нет - 7
Рекомендуем к прочтению
Появление элементов при скролле
Что такое HTML простыми словами
Как задать цвет текста в CSS — меняем цвет текста с помощью стилей
💬Комментарии:

CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Перейти в Telegram
Наш рейтинг
🏆Лучший хостинг для сайта
1
Ukraine
9/10
2
HostPro
8/10
3
TutHost
8/10
4
Hostiq
8/10
5
Cityhost
8/10
6
Freehost
7/10
7
UAhosting
7/10
Что читают?
🏆Популярные записи
Как сделать гамбургер (бургер) меню — готовый код и подробное объяснение
Просмотров: 36714
Появление элементов при скролле
Просмотров: 29256
Как сделать плавное увеличение картинки при наведении — эффект на чистом CSS
Просмотров: 23017
Как выровнять картинку по центру с помощью CSS
Просмотров: 17846
Как изменить цвет SVG в CSS
Просмотров: 15687
Проверка знаний
🤔Хорошо ли вы знаете CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили: 

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
10px
20px
30px
Viva Magenta
🤔Цвет 2023 года
Исследовательский институт Pantone выбрал главный цвет 2023 года. Им стал карминово-красный оттенок с фиолетовым подтоном, который назвали Viva Magenta.
#bb2649