Невероятный эффект в Divi 5 — наблюдайте, как фон меняет цвет при наведении курсора!

В сегодняшнем уроке по Divi 5 мы покажем вам, как создать красивый эффект наведения курсора с черно-белого изображения на полноцветное внутри вашего главного раздела. Используя обновленный конструктор Divi 5 и немного CSS-кода backdrop-filter, вы можете преобразовать фоновое изображение из оттенков серого в насыщенный, яркий цвет — при этом текст и кнопки сверху останутся идеально четкими.

Этот современный эффект наведения мгновенно придаст вашей главной странице, портфолио или целевой странице премиальный вид. Вы узнаете, как структурировать макет главного раздела, применить фильтр оттенков серого, активировать изменение цвета при наведении курсора и обеспечить адаптивность на всех устройствах.

Фантастический эффект, невероятно простой, мощный и визуально впечатляющий.

Идеально подходит для главных страниц, страниц товаров, личных портфолио и целевых страниц.

ТЕМЫ И ПЛАГИНЫ, ИСПОЛЬЗОВАННЫЕ В ЭТИХ ВИДЕО:

Плейлист по созданию сайтов на WooCommerce:    • Divi eCommerce Store  

Попробуйте тему Divi: https://bit.ly/TryDiviNow

Скидка 10% на плагин Divi Supreme Modules Pro: https://divisupreme.com/system22/?ref=6

Плагин Divi Supreme Modules Light: https://bit.ly/SupremeFreeVersion

Изображения, созданные с помощью AI от Nightcafe: https://creator.nightcafe.studio?fpr=...

Используйте промокод SYSTEM22NC для скидки 15%

МОИ ПЛЕЙЛИСТЫ НА YOUTUBE:

Плейлист Divi для начинающих:    • Divi For Beginners  

Плейлист с модулями Divi Supreme:    / watch  

v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw

Страница плейлиста с другими видео по этой теме:    / system22net  

Плейлист с полным созданием интернет-магазина:    / watch  

v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9

Видео с формой обратной связи и загрузкой файлов:    • Divi Theme Contact Form With File Upload 👍👍👍  

Посмотрите наши плейлисты, чтобы найти больше видео на эту тему:    / system22net  

Не забудьте задать любые вопросы ниже, я постараюсь ответить или сделать для вас видеодемонстрацию!

Подписаться:    / @system22  

МОЙ БЛОГ

https://web-design-and-tech-tips.com

ИСПОЛЬЗОВАННЫЙ СЕГОДНЯ КОД

backdrop-filter:grayscale(1);

transition-duration:1.2s;

Примечание: Некоторые из этих ссылок являются партнерскими, и я получу небольшую комиссию, если вы совершите покупку, без дополнительных затрат с вашей стороны.

#Divi #Divi5 #DiviTutorial #WordPressDesign #WebDesign #HoverEffects #UIUX #ElegantThemes #HeroSection #CSSBackdropFilter #system22tv