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

Верстка

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

🗓️ Оновлено: 15.08.2022

💬Коментарів: 2

👁️Переглядів: 9895

Владимир Самойлов

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

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

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

Стаття була корисною?

👍

Так - 33

👎

Ні - 11

Рекомендуємо до прочитання

Як змінити колір SVG у CSS

Плавне підкреслення посилання при наведенні на чистому CSS

Як зробити затемнення фону (картинки) на CSS

💬Коментарі:

Robert Lipinski

Hello, I like your solution, but how can I control the speed of hover effect?

2 Квітня, 2023

Відповіcти

Volodymyr

You need another approach to make a smooth transition.

It is not suitable to use “display:none” for this.
You can try opacity:0 and visibility:hidden – and then replace the values with “1” and “visible” respectively.

2 Квітня, 2023

Відповіcти

Скасувати відповідь

CSS Головоломки в Telegram

Підписуйся і не пропускай:

Актуальні новини

Цікаві завдання

Корисні добірки

Перейти до Telegram

Наш рейтинг

🏆Найкращий хостинг для сайту

9/10

8/10

8/10

8/10

8/10

7/10

7/10

Что читают?

🏆Популярные записи

Як зробити гамбургер (бургер) меню – готовий код та докладне пояснення

Як зробити плавне збільшення картинки при наведенні – ефект на чистому CSS

Поява елементів при скролі

Як змінити колір SVG у CSS

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

Перевірка знань

🤔Чи добре ви знаєте 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