JSFiddle - React, Tailwind, and code Playground

by dife

HTML

<div class="box">
  <div class="item"></div>
<div class="atributos">
   <p>Dano: 73</p>
   <p>Agilidade: 89</p>
   <p>Peso: 45</p>
   <p>Feito por Hattori Hanzō</p>
</div>
</div>

CSS

.item{
  width: 450px;
  height: 300px;
  background: url(https://hypescience.com/wp-content/uploads/2013/09/japanese-swords-samurai-swords-musashi-maou-kaze-katana.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.atributos{
   position: absolute;
   top: 15px;
   left: 15px;
   background: rgba(0,0,0,0.5);
   display: none;
}

.item:hover ~ .atributos{
display : block;
}