<div class="image-wrapper">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
.image-wrapper {
position: relative;
float: left;
}
.image-wrapper > img {
display: block;
}
.image-wrapper::after {
display: block;
content: '';
position: absolute;
left: -100%;
top: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(135deg, transparent 44.75%, #fff3 45%, #fff3 55%, transparent 55.25%);
z-index: 1;
}
.image-wrapper:hover::after {
animation: blink 0.5s linear 1;
}
@keyframes blink {
from {
left: -100%;
}
to {
left: 100%;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.