Elementor

Cool Animated Magic Card Hover Effects for Columns

Written by :

Posted on :

Tags :

animation, css, effects, hover

Share :

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. Required fields are marked *

Thanks for stopping by! Here's something totally awesome before you depart.
READY FOR A TOTALLY AWESOME WEBSITE?