JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
<h3>Product</h3>
<div class="product-container">
  <img class="product-image"/>
</div>
</div>

CSS

.parent {
  padding:8px;
  position:relative;
}
.product-container {
  position:relative;
  width:100px;
  height:100px;
}
.product-container:before {
  content: "";
  position: absolute;
  display:none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:blue;
  z-index:1;
}
.product-image {
   width:100%;
   height:100%;
   background-color:red;
   position:relative;
}
.parent:hover .product-container:before {
  display:block;
}