How to Create an Amazing ZOOM-IN Profile Card Effect in Elementor Pro

How to Create an Amazing ZOOM-IN Profile Card Effect in Elementor Pro | WordPress Tips & Tricks

November 30, 2024

Enhance your Elementor designs with this Overlay Background Zoom-In and Column Element Show/Hide CSS. These simple yet effective CSS snippets allow you to add dynamic hover effects to your website. The Zoom-In effect smoothly enlarges background images with a scaling transition, creating a visually appealing animation. Meanwhile, the Column Show/Hide effect adds interactivity by revealing hidden elements like text or icons on hover. Both effects are fully customizable and designed to work seamlessly with Elementor’s structure.

Separate Code

CSS

				
					/*Overlay Background Zoom-In CSS*/

selector{
overflow: hidden !important;
}
selector.e-con:before{
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
-webkit-transform-origin: left;
transform-origin: left;
}
selector:hover.e-con:before{
-webkit-transform: scale(2);
transform: scale(2);
}


/*Column Element Show/Hide CSS*/

selector .e-con-full.e-flex.e-con.e-child{
opacity: 0;
-webkit-transition: all 0.75s !important;
transition: all 0.75s !important;
}
selector:hover .e-con-full.e-flex.e-con.e-child{
opacity: 1;
}

Blog Authors

Suscribe for our Newsletter

Youtube

How to Create Realistic Cracked Skin Portraits Using Elementor

In today’s video, I’ll teach you how to create stunning and realistic cracked skin portraits

November 30, 2024 No Comments

Youtube