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

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.

Download Template

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;
}

Share :

Facebook
Twitter
LinkedIn
WhatsApp
Picture of Blog Authors

Blog Authors

Category

Recent Post

Share

Suscribe to Our Newsletter

No spam, notifications only about new products, updates.

Subscription Form

Suscribe for our Newsletter

Subscription Form

Related Post