JSFiddle - React, Tailwind, and code Playground

HTML

<div class="img">
  <img src="https://trgallery.net/_data/i/upload/2014/07/20/20140720223626-aaf1fc18-me.jpg" />
  <div class="overlay">Hello World</div>
</div>

CSS

.img {
  position: relative;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}
.overlay {
  position: absolute;
  top: 50%;
  transform: translate(0,-50%);
  left: 0;
  transition: all 1s;
  overflow: hidden;
  width: 0;
  background: #F6F6F6;
  line-height: 100px;
  font-size: 0;
  text-align: center;
}

.img:hover .overlay,
.overlay:hover {
  width: 100%;
  font-size: 20px;
}

.img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img:hover > img {
	-webkit-filter: grayscale(100%);filter: grayscale(100%);
}