Are you looking to add a touch of elegance and interactivity to your website’s design? With Elementor, you can create captivating hover effects that engage your visitors and elevate your site’s visual appeal. In this tutorial, we’ll walk you through the process of crafting a magic card hover effect for Elementor containers. Let’s dive in!
The Power of Visual Appeal
In the competitive world of online business, a visually appealing website can make all the difference. That’s why we, at WebSense Pro, are committed to bringing you valuable tutorials to enhance your website’s aesthetics and functionality.
Unveiling the Magic Card Hover Effect
In this tutorial, we’re thrilled to introduce you to the magic card hover effect. Our co-host, Dita Sheikh, will guide you through each step, ensuring you have a clear understanding of how to implement this stylish effect on your Elementor containers.
Step 1 Setting the Stage
The journey begins with adding a new page and naming it “Magic Card Hover Effect.” Once you’re in Elementor’s editing mode, you’ll create a visually captivating structure for the effect.
Step 2 Crafting the Main Container
Dita Sheikh demonstrates how to align the main container to the center and adjust its dimensions using VH units. This foundational setup provides the canvas for the magic card hover effect to come to life.
Step 3 Styling the Container
With a keen eye for design, we’ll dive into styling the main container. You’ll learn how to select background colors, tweak padding settings, and even add a subtle border to enhance the visual appeal.
Step 4 Adding the Hover Effect
The real magic happens as we delve into creating the hover effect. Dita Sheikh walks you through the process of changing the container’s appearance upon hovering. From borders to opacity, each detail contributes to the final mesmerizing result.
Step 5 Bringing the Elements Together
Our tutorial doesn’t stop at the basics. We show you how to duplicate and modify containers for a consistent and visually harmonious effect. This attention to detail is what separates an average website from an exceptional one.
Step 6 Previewing the Enchantment
Before wrapping up, we’ll give you a sneak peek of the finished product. Witness the captivating magic card hover effect in action, ready to impress your website visitors.
selector{
--first-color: #5ddcff;
--second-color: #3c67e3;
--third-color: #4e00c2;
}
@property --rotate {
syntax: "<angle>";
initial-value: 132deg;
inherits: false;
}
selector::before, selector::after{
opacity: 0;
content: "";
transition: all 0.5s ease-in-out;
}
selector:hover::before, selector:hover::after{
position: absolute;
z-index: -1;
background-image: linear-gradient(
var(--rotate)
, var(--first-color), var(--second-color) 43%, var(--third-color));
animation: spin 2.5s linear infinite;
opacity: 1;
}
selector:hover::before {
width: 94%;
height: 94%;
border-radius: 8px;
top: 3%;
left: 3%;
}
selector:hover::after {
top: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
transform: scale(0.9);
filter: blur(70px);
}
@keyframes spin {
0% {
--rotate: 0deg;
}
100% {
--rotate: 360deg;
}
}
