fbpx

Create background and border overlapping hover effect in elementor

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

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.

Scroll to Top