In this video, I’ll show you how to create background and border overlapping hover effect in elementor.
selector{
--color:#FF5454;
--bg-transition-speed:0.25s;
}
selector .card-container{
position: relative;
}
selector .card-container:before, selector .card-container:after{
content: "";
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
border: 2px solid var(--color);
transition: all var(--bg-transition-speed) ease-out;
}
selector .card-container:before{
background-color: var(--color);
top: -15px;
left: -15px;
}
selector .card-container:after{
bottom: -15px;
right: -15px;
}
/* Hover animation */
selector .card-container:hover:before {
top: 15px;
left: 15px;
}
selector .card-container:hover:after {
bottom: 15px;
right: 15px;
}
Disclosure: Some of the links here are referral/affiliate links which means if you decide to buy through those links I’ll earn a commission at no extra cost to you. This is how I keep Designtheway.com up and running.
Plugin used
