Cool Animated Magic Card Hover Effects for Columns

Written by :

Posted on :

Tags :

Share :

Facebook
Twitter
LinkedIn
Reddit
Pinterest

Card One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Card Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Card Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

What This CSS Code Does:

Found this awesome effect from Jim Fahad Digital. This will create a magic card hover effect for columns. 

Required Plugins:

Elements Used:

How To Implement:

The CSS Code:

				
					selector{
    --first-color: #5ddcff; 
    --second-color: #3c67e3;
    --third-color: #4e00c2;
}
@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}
selector::before, selector::after{
    opacity: 0;
    content: "";
    transition: all 0.5s ease-in-out;
}
selector:hover::before, selector:hover::after{
    position: absolute;
    z-index: -1;
    background-image: linear-gradient(
    var(--rotate)
    , var(--first-color), var(--second-color) 43%, var(--third-color));
    animation: spin 2.5s linear infinite;
    opacity: 1;
}
selector:hover::before {
  width: 104%;
  height: 104%;
  border-radius: 8px;
  top: -2%;
  left: -2%;
}
selector:hover::after {
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  transform: scale(0.9);
  filter: blur(70px);
}
@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}
				
			

Leave a Reply

Your email address will not be published.

Schedule A Call
Play Video
Thanks for stopping by! Here's something totally awesome to brighten up your day!
Schedule A Call
READY FOR A TOTALLY AWESOME WEBSITE?