Нещодавно я працював над сайтом клієнта, і він попросив мене створити такий ефект. Даний ефект дуже часто використовується на сайтах-портфоліо, де сайт повинен показувати візуальну і інформаційну складові. Існує багато різних методів. Раніше я ніколи щось подібне не робив. Я почав розбиратися і знайшов кілька різних методів.
Перший спосіб передбачав використання jQuery плагіна. Не зовсім той ефект, який я шукав. Крім того, плагін багато важить.
Інший спосіб був - помістити тег img в контейнер і маніпулювати зображенням за допомогою CSS. Тут є свої плюси: можна задати джерело за допомогою атрибута srcset, щоб довантажувати відповідне зображення під конкретний пристрій.
У моєму випадку я хотів керувати ефектом зуму повністю через CSS, тому я вибрав другий спосіб.
базовий функціонал
Для досягнення оптимальної продуктивності я вирішив використовувати властивість transform для збільшення зображення. Таким чином, ми отримуємо CSS анімацію з апаратним прискоренням, що робить її більш плавною.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Замість тега img я взяв тег div і помістив його в контейнер. Даний блок повинен був імітувати роботу тега img. структура:
По-перше, необхідно задати розміри батьківського елемента. Дочірні елементи можуть заповнити батьківський блок за допомогою властивостей width: 100% і height: 100% ;. Також необхідно задати фонове зображення, яке буде закривати 100% блоку.
Потім ми додаємо ефект hover на батьківський блок. Даний ефект буде впливати на дочірній елемент. Псевдоклас focus добре підходить для доступності:
Для максимальної підтримки в браузерах можна скористатися спеціальним інструментом для додавання Вендорний префіксів. Закінчуючи наш базовий ефект, можна додати трохи плавних переходів для нормального стану дочірнього елемента:
Для додавання перекриває шару з певним кольором можна використовувати псевдоелементи типу. before:
Якщо тепер навести курсор на батьківський блок, поверх дочірнього елемента повинен з'явитися кольоровий шар! І нарешті, ми розглянемо, як додати текст на перекриває шар. У наш дочірній блок можна додати новий елемент:
Тегу span можна задати пару стилів:
Текст з'явиться тільки при наведенні курсору на блок .parent:
Підтримка на мобільних пристроях
Якщо контейнери зроблені у вигляді посилань, і стан hover не несе в собі корисної інформації, можна все залишити прямо так.
Редакція: Dylan Winn-Brown
Редакція: Команда webformyself.
Практичний курс по верстці адаптивного Лендінзі з нуля!
Навчіться з нуля верстати адаптивні Лендінзі на HTML5 та CSS3 за найближчі 6 днів
Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі
