Перейти к содержимому

The Background Switcher Effect You Didn’t Know You Needed | Elementor Tutorial

DanDigital

0:00 / 0:00

The Background Switcher Effect You Didn’t Know You Needed | Elementor Tutorial

3 633 просмотра · 1 год назад
DanDigital
1,13 тыс. подписчиков
3 633 просмотра · 1 год назад
💻 In this tutorial, I’ll show you how to create a full background switcher effect triggered by hovering over individual call-to-action cards. We’ll use a smart combination of containers, images, CSS, and lightweight JavaScript to toggle an active class on our images with no extra plugins or widgets required. The result? A sleek, responsive effect that’s surprisingly simple once you know the trick. 🔧 Code used in the video: https://codepen.io/DanDigitalUK/pen/w... 🛠️ Built with Elementor (affiliate link): https://be.elementor.com/visit/?bta=2... CHAPTERS: 00:00 Introduction 01:38 Main container setup 03:29 First CTA box 07:35 First image 09:03 Responsivity setup 10:57 Add the custom CSS 11:24 Duplicate the CTA and image 12:36 Make borders responsive 14:01 Add the custom JavaScript 14:58 Background images on mobile 16:34 Custom CSS settings 20:52 Outro 👍 Like, comment, and subscribe for more tips on making your web designs stand out!