JSFiddle - React, Tailwind, and code Playground

HTML

<a href="">

  <img src="https://pbs.twimg.com/media/DI3ejMOV4AAI5V2.jpg" alt="">

</a>

CSS

@import url('https://fonts.googleapis.com/css2?family=Neucha&display=swap');


* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Neucha', cursive;
}
a {
  display: inline-block;
  position: relative;
}
a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: url(https://pbs.twimg.com/media/DI3ejMOV4AAI5V2.jpg) no-repeat;
  filter: grayscale(100%);
  transition: width 1s;
}
a:hover::after {
  width: 100%;
}