<div class="text">Merry Christmas</div>
<div>hover on the image!</div>
<div class="img-box">
  <img src="https://images.pexels.com/photos/4834891/pexels-photo-4834891.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="">
</div>
$main: indianred;

body {
  text-align: center;
  font-size: 20px;
  font-family: 'Lobster', cursive;
  background-color: #ececec;
}
.text {
  font-size: 60px;
  padding: 12px 0;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(
    -45deg,
    $main 45%,
    rgba(white, 0.5) 50%,
    $main 55%
  );
  background-size: 250% 100%;
  animation: shiny 2.5s both infinite;
}
.img-box {
  width: 500px;
  margin: 12px auto;
  position: relative;
  cursor: pointer;
  box-shadow: 3px 3px 10px rgba(black, 0.7);
  &:before {
    content: 'hello!';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(
      -45deg,
      rgba(black, 0.5) 40%,
      rgba(white, 0.7) 50%,
      rgba(black, 0.5) 60%
    );
    background-size: 300% 300%;
    font-size: 24px;
    color: transparent; // for delay display
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s, color 0.2s 0.2s;
  }
  &:hover:before {
    color: white;
    opacity: 1;
    animation: shiny 1s both;
  }
  img {
    display: block;
    width: 100%;
    background-color: wheat;
  }
  
}

@keyframes shiny {
  0% {
    background-position: 100% 100%;
  }
  // 100% {
  //   background-position: 0% 0%;
  // }
}
View Compiled

External CSS

  1. https://fonts.googleapis.com/css2?family=Lobster&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.