I've been trying to figure out how I can add an animated shadow effect to a Bootstrap 4 Card. Currently, my Cards are arranged like this:
My objective is to create an animated shadow around the card similar to the one shown in this video. I've included a screenshot but the video showcases the animation:
(https://www.youtube.com/watch?v=1EAtn4B-76g)
The code snippet for the animated box in the Youtube example is as follows:
body {
margin: 0;
padding: 0;
background: #000;
}
.shadow {
position: relative;
margin: 200px auto 0;
width: 400px;
height: 250px;
background: linear-gradient(0deg, #000, #262626);
}
.shadow:before,
.shadow:after {
content: '';
position: absolute;
top: -2px;
left: -2px;
background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000);
background-size: 400%;
width: calc(100% + 4px);
height: calc(100% + 4px);
z-index: -1;
animation: animate 20s linear infinite;
}
.shadow:after {
filter: blur(10px);
}
@keyframes animate {
0% {
background-position: 0 0;
}
50% {
background-position: 300% 0;
}
100% {
background-position: 0 0;
}
}
I am relatively new to Bootstrap and CSS. I have attempted various methods to integrate this effect into the card design without success. While I can display a rainbow gradient above the card, adjusting the z-index to -1 causes it to disappear entirely.
Screenshot of the Gradient before Adding Z-Index
I would greatly appreciate any advice or guidance on how to incorporate an animated glow effect around Bootstrap 4 Cards! :(