JSFiddle - React, Tailwind, and code Playground

HTML

<div class="product_card">
<div class="filter"></div>
<span class="text_img"><h2>Товар</h2></span>
<div class="product_card_img">

<img class="images" src="https://static-pss-ru.wgcdn.co/shop/media/items/5b/b1/5bb18c218fbb45ae854a7aaf03118fcd_1x1.png" alt="#"></div>
<span class="price">111 &#8381;</span><s class="price_bonus">120 &#8381;</s>
<button>
Купить
</button>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

.product_card {
  position: relative;
	box-sizing: border-box;
	max-width: 300px;
	max-height: 300px;
	user-select: none;
	background: #333;
	display: block;
	will-change: transform;
	border: 1px solid rgba(255, 255, 255, 0.05);
}

.product_card_img {
	 background-image: url("https://static-pss-ru.wgcdn.co/shop/static/3.84.1/frontend/images/blocks/item/item_image_flag__sweden.png");
  z-index: 2;
}

.text_img {
	text-align: left;
	color: #fff;
	text-transform: uppercase;
	font-size: 18px;
	overflow: hidden;
	white-space: nowrap;
}

.price {
	font-size: 30px;
	color: #c3a782;
	position: absolute;
  bottom: 0;
  z-index: 100;
}

.price_bonus {
  position: absolute;
  bottom: 0;
  left: 20%;
  z-index: 100
}


s {
	font-size: 20px;
	color: #fff;
	position: relative;
	opacity: 0.5;
	margin-left: 13px;
}

.filter {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 5;
  transition:.2s;
}

.images {
  width: 80%;
}

.filter:hover {
     background-color: rgba(0, 0, 0, 0.6);
}
button{
  width: 100px;
  height: 30px;
  text-align: center;
  position: absolute;
  color: #fff;
  background: orange;
  margin-left: 130px;
  margin-top: -50px;
  display: none;
}
button:hover{
  display: block;
}