html,
body {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
height: 100%;
background-color: #000;
}
.image-container {
position: relative;
overflow: hidden;
width: 200px;
height: 150px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.image-container::before {
content: '';
position: absolute;
top: 50%;
left: -50%;
height: 200%;
box-shadow: 0 0 20px 6px rgba(243, 244, 245, 1);
transform: translateY(-45%) rotateZ(225deg);
animation: moveLighting 1s ease-out infinite ;
animation-delay: 2s;
}
@keyframes moveLighting {
0% {
left: -50%;
}
100% {
left: 150%;
}
}