JSFiddle - React, Tailwind, and code Playground

by alexstudioweb

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="da-thumbs" class="da-thumbs">
    <li> <a href="">
      <div><span>Menu by Simon Jensen</span></div>
    </a>

    </li>
    <li> <a href="">
      <div><span>Mr. Crabs by John Generalov</span></div>
    </a>

    </li>
</ul>

CSS

.da-thumbs {
    list-style: none;
    padding:20px;
    display:inline-block;
}
.da-thumbs li {
    width:200px;
    height:200px;
    background: #000;
    float: left;
    margin: 5px;
    position: relative;
    z-index: 0;
}
.da-thumbs li a {
    display: block;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}
.da-thumbs li a div {
    display:none;
    position: relative;
    background: #777;
    background: rgba(75, 75, 75, 0.7);
    width:200px;
    height:200px;
    z-index: 3;
}
.da-thumbs li a div span {
    display: block;
    padding: 10px 0;
    margin: 40px 20px 20px 20px;
    text-transform: uppercase;
    font-weight: normal;
    color: #fff;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 -10px 0 rgba(255, 255, 255, 0.3);
}

JavaScript

$("#da-thumbs li").hover(function () {
     $(this).find("div").show();
 }, function () {
     $(this).find("div").hide();
 });

 $('#da-thumbs li').mousemove(function (e) {
     var $this = $(this);
     $this.find("div").css({
         left: e.pageX - $this.position().left,
         top: e.pageY - $this.position().top
     });
 });