JSFiddle - React, Tailwind, and code Playground

by dife

HTML

<div class="item">
   <img src="https://hypescience.com/wp-content/uploads/2013/09/japanese-swords-samurai-swords-musashi-maou-kaze-katana.jpg"/>
  <div class="atributos">
   <p>Dano: 73</p>
   <p>Agilidade: 89</p>
   <p>Peso: 45</p>
   <p>Feito por Hattori HanzĹŤ</p>
</div>
</div>

<div class="item">
   <img src="https://i.ebayimg.com/images/g/L2QAAOSwKIpWECN7/s-l300.jpg"/>
  <div class="atributos">
   <p>Dano: 25</p>
   <p>Agilidade: 150</p>
   <p>Peso: 12</p>
   <p>Feito por Dovahkiin</p>
</div>
</div>

<div class="item">
   <img src="http://pm1.narvii.com/6489/d8b4e778a9b31ffbdb71dc15b6512ab1dcaa877c_hq.jpg"/>
  <div class="atributos">
   <p>Dano: 15</p>
   <p>Agilidade: 52</p>
   <p>Peso: 5</p>
   <p>Feito por Jarl Borl</p>
</div>
</div>

CSS

.item{
  width: 350px;
  height: 300px;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: inline-block;
}

.item img{
  width: 350px;
  height: 300px;
}


.atributos {
  width: 200px;
  height: 200px;
  padding: 10px;
  position: absolute;
  border-radius: 20px;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  color: #FFF;

}

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

JavaScript

$('.item').on({
  mousemove: function(e) {
  
   //armazena o offset 
   var offset = $(this).offset();
   var X = (e.pageX - offset.left);
   var Y = (e.pageY - offset.top);
  
    $('.atributos').css({
      left: X,
      top: Y
    })
  }
});