JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
  <img src="https://www.imore.com/sites/imore.com/files/images/stories/2009/10/photo-42.jpg" alt="">
  <div class="hover-block">
    <a href="#" class="show-now">Show now</a>
  </div>
</div>

CSS

.block {
  width: 350px;
  height: 400px;
  position: relative;
}

.block:hover .hover-block {
   opacity: 1;
   visibility: visible;
}

.hover-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(113, 184, 230, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all .3s linear;
}

.hover-block a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 30px;
  border: 2px solid #fff;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}

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