JSFiddle - React, Tailwind, and code Playground

by dife

HTML

<div class="item">
  <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 {
  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) {
    $('.atributos').css({
      left: e.pageX /2,
      top: e.pageY /2
    })
  }
});