JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item">
  <img src="https://images.pexels.com/photos/144474/pexels-photo-144474.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
</div>

CSS

.item {
  width: 350px;
  overflow: hidden;
}

img {
  display: block;
  width: 400px;
  filter: grayscale(100%);
  transition: 0.3s filter, 0.3s transform;
}

.item:hover img {
  transform: translateX(-30px);
  filter: grayscale(0%);
}