![](https://cdn.prod.website-files.com/618a182287e8f00dbb1aff52/65f77c13f9ed005fb36ec2bc_61-shining-img.png)
Card Shine
Here's the code:
<script>
.shine-wrap::before {
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
content: "";
display: block;
height: 100%;
left: -95%;
position: absolute;
top: 0;
transform: skewX(-25deg);
width: 50%;
z-index: 2;
}
.shine-wrap:hover::before, .shine-wrap:focus::before {
animation: shine 0.85s;
}
@keyframes shine {
100% {
left: 125%;
}
}
<script>