JSFiddle - React, Tailwind, and code Playground

by Kabir Hossain

HTML

<ul class="thumb">
<li> <img src="imagewithtooltip.png" width="200" height="229" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt rhoncus risus sed rhoncus." /></li>
</ul>

CSS

ul.thumb {
float: none;
list-style: none;
margin: 0;
padding: 10px;
width: 360px;
bottom: 5px;
}
ul.thumb li {
margin: 0;
padding: 5px;
float: right;
position: absolute;  /* Set the absolute positioning base coordinate */
width: 200px;
height: 200px;
bottom: 5px;
right: 40%;
}
ul.thumb li img {
width: 200px;
height: 200px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic;
padding: 5px;
position: relative;
left: 0;
top: 0;
}

.hover {
background:url(thumb_bg.png) no-repeat center center;
}

.caption {
background:#ffcc00;
position: absolute;
top: 100%;
left: 0px;
}

JavaScript

$(function(){
      $("ul.thumb li").hover(function() {
      $(this)
        .css('z-index', '10')
        .find('img').addClass("hover")
        .stop()
        .animate({
           marginTop: '-150px',
           marginLeft: '-150px',
           top: '50%',
           left: '50%',
           width: '300px',
           height: '300px',
           padding: '20px'

         }, 200, function() {

            var $this = $(this),
            h = $this.height();
            $caption = $('<div class="caption">' + this.title  + '</div>')
                .css('top', h.toString() + 'px');
                $this.after($caption);

          }); 

       }, function() {

     $('.caption').remove();
     $(this)
    .css('z-index', '0')
    .find('img').removeClass("hover")
    .stop()
    .animate({

        marginTop: '0',
        marginLeft: '0',
        top: '0',
        left: '0',
        width: '200px',
        height: '200px',
        padding: '5px'

     }, 400);
   });
  });