Верстка

Як за допомогою CSS змінити картинку при наведенні курсору

🗓️ Оновлено: 15.08.2022
💬Коментарів: 0
👁️Переглядів: 889

Як досягти зміни картинки при наведенні? Це можна реалізувати за допомогою CSS.

Готовий приклад:

Пояснення. Як ми зробили, щоб картинка змінювалася під час наведення? Ми в HTML код відразу додали дві картинки, але одну приховали за допомогою: nth-of-type(2). Потім при наведенні (hover) на батьківський елемент ми першу картинку приховуємо (display: none), а другу навпаки показуємо, задаючи їй display: block;

Стаття була корисною?
👍
Так - 3
👎
Ні - 0
Рекомендуємо до прочитання
Як вирівняти картинку по центру за допомогою CSS
Як зробити затемнення фону (картинки) на 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
Что читают?
🏆Популярные записи
Як зробити гамбургер (бургер) меню – готовий код та докладне пояснення
Переглядів: 18285
Поява елементів при скролі
Переглядів: 16841
Як вирівняти картинку по центру за допомогою CSS
Переглядів: 6953
Як зробити плавне збільшення картинки при наведенні – ефект на чистому CSS
Переглядів: 6790
Як зробити ефект натискання кнопки на CSS
Переглядів: 6209
Перевірка знань
🤔Чи добре ви знаєте CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили: 

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
10px
20px
30px
Very Peri
🤔Колір 2022 року
Інститут кольору Pantone оголосив цвіт 2022 року. Це бузковий відтінок під назвою 17-3938 Very Peri.
#6667ab