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;
}
}
