Вітаю, дорогі друзі. У сьогоднішній статті я хочу розповісти, як створити ефект, коли при наведенні курсору мишки на зображення, відбувається зміна вихідного зображення на підставну.
А сьогодні ви дізнаєтеся, як створити цей ефект з використанням двох різних зображень. Такий спосіб простіше в реалізації, так як вам не доведеться заздалегідь створювати подвійні зображення. Ви зможете реалізувати ефект із зображеннями вже завантаженими раніше на ваш сайт.
На чому заснований ефект зміни зображення
Суть всього ефекту, полягає в тому, що два зображення поміщаються в один блок ДІВ. Цьому блоку присвоюється клас або ідентифікатор і кожного зображення також присвоюється свій клас. А далі використовуючи ці класи, створюються css стилі для зміни одного зображення на інше, при наведенні курсору мишки. І досягається це за рахунок властивості прозорості (opacity).
Підготовка html каркаса для зображення
Отже, в тому місці де ви хочете створити цей ефект вам необхідно вставити ось такий html каркас:
де ви, зрозуміло, міняйте ширину, висоту і посилання на зображення.
А далі можна переходити до створення css стилів.
Створення css стилів
В якості першого прикладу візьмемо ось такі зображення:
Приклад кнопки 1
Приклад кнопки 2
Я хочу створити ефект, коли ободок буде, проявляється після наведення курсору мишки.
Спочатку я розміщую html каркас із зазначенням шляхів до файлів і їх розмірів:
Для досягнення потрібного ефекту в файл таблиці стилів потрібно додати ось такі стилі:
До речі, у властивостях контейнера ширину і висоту можна виставити в процентах, але в такому варіанті властивість margin: 0 auto; втрачає свою актуальність. Загалом, в залежності від того де будете використовувати вставку зображень, застосовуйте і відповідні властивості.
Якщо плавна зміна зображень вам не потрібна, приберіть ці властивості, або змініть інтервал:
Ось таким ось простим способом можна створити ефект зміни зображення при наведенні курсору мишки. Тільки врахуйте, працювати потрібно з кожним зображення. Єдиний момент, якщо у вас зображення однакового розміру, то властивості css ви зможете прописати один раз, а все зображення потрібно буде розмістити в html каркас вказаний раніше.