Shine image on hover pure CSS animation

• 24 August 2018
• CSS,
• Animation,
• Keyframes

Code #

image-wrapper {
display: block;overflow-x: auto;align-items: center;
  text-align: center; overflow-x: hidden;
}
.image-wrapper img {
  height: auto; max-width: 100%; min-width: 350px; width: 400px; overflow-x: hidden; 
    vertical-align: middle;border-style: none}


.shine {
  position: relative;overflow-x: hidden
}
.shine::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: -75%;
  position: absolute;
  top: 0;
  transform: skewX(-25deg);
  width: 50%;
  z-index: 2; overflow-x: hidden
}
.shine:hover::before, .shine:focus::before {
  -webkit-animation: shine 0.85s;
          animation: shine 0.85s;
}
@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}

• Previous: This is my second post with a much longer title.
• Next: This is my fourth post.