fbpx

Create background and border overlapping hover effect in elementor

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

You may also like

Ananda Projapati

Ananda Projapati

A freelance Wordpress consultant and educator.

Recent Posts

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.