JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="listcontainer">
    <li class="li1">
        <img src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="210" height="130"><span><b>Exteriors:</b> <br>Minimal Wear, Battle Scarred<br><br><img src="images/tick.png"><br>&nbsp;</span>

    </li>
     <li class="li1">
        <img src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="210" height="130"><span><b>Exteriors 22:</b> <br>Minimal Wear, Battle Scarred<br><br><img src="images/tick.png"><br>&nbsp;</span>
    </li>
    <li class="li1 own-line">
        <img src="http://stephboreldesign.com/wp-content/uploads/2012/03/lorem-ipsum-logo.jpg" width="210" height="130"><span><b>Exteriors 22:</b> <br>Minimal Wear, Battle Scarred<br><br><img src="images/tick.png"><br>&nbsp;</span>
    </li>
</ul>

CSS

.li1 {
    display: block;
    width: 210px;
    height: 130px;
    border: 1px solid red;
    position: relative;
    display:inline-block;
}
.li1 span {
    position: absolute;
    top: 140px;
    left: 0px;
    right: 0;
    width: 220px;
    padding: 2px 0;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.65);
    color: #fff;
    opacity: 0;
    transition: opacity .5s ease-in-out;
    text-align: center;
    font-family: Arial;
    font-size: 14px;
}
.li1.own-line{
  display:block;
}
.li1:hover {
  z-index:1000;
}
.li1:hover span {
    opacity: 1;
}

JavaScript

$('.li1').mousemove(function (e) {
    $('span', this).css({left: e.pageX - 100, top: e.pageY + 10});
});