Багато з Вас ще, незалежно від знань верстки та програмування, стикалися з
заміною зображення при наведенні на нього. Найчастіший приклад - наведення курсору миші на кнопку. В результаті картинка змінювалася, можливо навіть в розмірах і формі. У даній статті я покажу як можна замінити зображення, змінити його розмір при наведенні на нього, використовуючи тільки CSS.
На майбутнє, рекомендую використовувати саме такий метод, так як користуючись засобами JS Ви ризикуєте потрапити на користувача, у якого він відключений в настройках браузера, в результаті чого людина може не побачити будь-яких деталей або не понять сенсу задумки.
Що будемо використовувати? Нам досить псевдоелемента hover і властивості background. З файлів це сам html файл і зображення.
У реалізації все просто. Код складається з двох частин:
1. html з потрібним div
Тепер пропоную розглянути цікавий і простий приклад роботи коду. При бажанні можна завантажити і розібрати принцип роботи у себе на комп'ютері.
Демонстрація Завантажити вихідні
Як ви бачите на прикладі, зображення, вказане за умовчанням (тобто image001), з'являється при завантаженні сторінки, а image002 тільки при наведенні курсору на перше зображення.
Увага! Потрібно обов'язково вказувати ширину і висоту блоку, в іншому випадку div просто не відобразиться. Також будьте уважні із зазначенням точних розмірів блоку, так як зображення всередині не буде масштабувати, так як воно вважається фоновим. Якщо розміри блоку будуть менше, то і видно буде тільки частина зображення.
Найчастіше використовується саме такий спосіб зміни зображення. Якщо хочете замінити зображення в інших випадках, наприклад, при кліці, то використовувати треба вже не hover. а active.
Дякую за увагу!