JSFiddle - React, Tailwind, and code Playground

by Artem Pryanishnikov

HTML

<div class="view style1" style="width: 340px; margin: 10px; height: 350px;">
<a href="https://multisoft.ru/images/cms/thumbs/6f5f160768a6801c6d27149aa4d8da42.png">
<img src="https://zaurmag.ru/wp-content/oblojki-kursov/middle-oblojka-3d-box-joomla-sait.jpg" alt="Тестовый товар" style="width: 300px; height: 300px;" />
<div class="mask">
<h2>СКЗИ "MS_KEY K" - "АНГАРА" (Исполнение 8.x.x)</h2>
<p> 
Ваш шедевр готов!
Товарищи! дальнейшее развитие различных форм деятельности способствует подготовки и реализации позиций, занимаемых участниками в</p>
<span class="readmore">Подробнее</span>
</div>
</a>
</div>
<div class="clear"></div>

CSS

.style1 {
	position: relative;
	width: 300px;
  height:300px;
  border:4px double red;
  
	}

.style1 h2 {
	position: absolute;
	top: 10px;
	width: 100%;
  color:white;
  background:black;
  text-align:center;
  font: 14px;
	}
.style1 p { 
display: none; 
position: absolute;
top:70px;
font-size: 12px; 
font-weight: 700; 
font-family: 'Segoe UI'; 

text-align: center; 
color: #fff; 
animation: fade .5s linear forwards; 
} 

@keyframes fade { 
0% { 
opacity: 0; 
} 
100% { 
opacity: 1; 
} 
} 

.style1 div:hover p { 
display: block; 
background: rgba(0, 0, 0, 0.5); 
cursor: pointer; 
}