JSFiddle - React, Tailwind, and code Playground

HTML

<div class="product">
  <img class="product-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Old_radio.jpg/564px-Old_radio.jpg" alt="antique radio, product image.">
  <img class="product-icon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Old_radio.jpg/175px-Old_radio.jpg" alt="antique radio, iconized.">
  <a href="#" class="product-cart" title="Add To Cart"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Shopping_cart_icon.svg/116px-Shopping_cart_icon.svg.png" alt=""></a>
</div>

CSS

.product{
  position: relative;
  width: 20em;
  background-color: black;
}
.product img{
  display: block;
  max-width: 100%;
  height: auto;
  transition: opacity 1s;
}
.product-image{
  background-color: black;
}
.product-icon{
  opacity: 0;
  position: absolute;
  width: 4em;
  top: 0em;
  left: 0em;
  background-color: white;
}
.product-cart{
  position: absolute;
  width: 5em;
  top: 50%;
  left: 50%;
  margin-left: -2.5em;
  margin-top: -2.5em;
}
.product-cart img{
  background-color: white;
  opacity: 0;
}
.product:hover .product-image{
  opacity: 0.5;
}
.product:hover .product-icon,
.product:hover .product-cart img{
  opacity: 1;
}