Ця стаття містить партнерські посилання. Коли ви купуєте щось через одне з них, я отримую невелику комісію, без додаткових витрат для вас 🙂
Навіщо вам це?
Є багато цікавих варіантів використання цього! Ми, наприклад, використовуємо цей трюк на нашій сторінці Шаблонів Layout, щоб показати демонстрацію того, як шаблон виглядатиме після дизайну. Це також чудовий спосіб показати фото "до" і "після" (або ви можете використовувати цей віджет!) або створити класний ефект при наведенні на фото.
Я скажу, що цей метод найбільше підходить, якщо більшість ваших відвідувачів знаходяться на десктопі, оскільки (очевидно) ви не можете навести на мобільних пристроях. Давайте розберемося!
Що потрібно зробити:
- Розмістіть блок із фото на вашій сторінці та завантажте фото, яке ви хочете показати при наведенні.
- Далі розмістіть ще один блок із фото безпосередньо поверх цього і завантажте фото, яке ви хочете показати до наведення.
- Перейдіть до панелі для кастомного CSS і додайте наступне
Ось CSS:
#BLOCK-ID img {
opacity: 1;
transition: opacity 0.5s ease-in-out; }
#BLOCK-ID:hover img {
opacity: 0; }
Примітки!
- Переконайтеся, що ви використовуєте ID блоку для фото, яке знаходиться на передньому плані (те, яке має з'являтися до наведення). Іноді найпростіше перемістити його на бік, отримати ID, а потім повернути назад.
- Налаштуйте перехід opacity, щоб зробити перехід швидшим або повільнішим (тобто змінюйте 0.5s на 1s)
Потрібна допомога у знаходженні та націлюванні на ID блоку?
Ознайомтесь з нашими улюбленими плагінами для фото:
- Нахил фото при наведенні (безкоштовно!)
- Текст при наведенні розкриває фото
- Змінювач обертання зображень
- Слайдер тексту та зображення поруч
Натискайте тут, щоб побачити попередній перегляд розсилки →
Оригінальне відео + пост →
Перекладено з: Change Photo On Hover in Squarespace