CSS Code Snippets
/*Background Curve CSS*/
:root{
--color: #14E2A4;
}
selector{
/*position: relative;*/
overflow: hidden !important;
}
selector .elementor-widget-image::before {
content: "";
width: 100%;
height: 0;
border-radius: 50%;
background-color: var(--color);
position: absolute;
bottom: 85%;
right: 0;
left: 0;
transform: scale(1.7);
transition: all 0.3s linear 0s;
z-index: 1
}
selector:hover .elementor-widget-image::before{
height: 100%;
}
selector img {
position: relative;
z-index: 2;
}
/*Image Hover CSS*/
selector img {
transition: all 0.9s ease 0s;
}
selector:hover img {
box-shadow: 0 0 0 14px var(--color);
transform: scale(0.7);
}
/*Social Show/Hide CSS*/
selector .elementor-widget-social-icons{
transition: all 0.4s ease 0s;
bottom: -30%;
}
selector:hover .elementor-widget-social-icons{
bottom: 0%;
}
Template Link
Card Effect on Hover using Elementor – Readymade Elementor Templates | WP Care Plus