JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <a class="screenshot" rel="http://1.bp.blogspot.com/-ZO2GFO9aAlA/UylO1U8pB5I/AAAAAAAAJzI/uLYVXKRIS3w/s250/Universe-Education-Responsive-WordPress-Theme.jpg" title="Universe - Education Responsive WordPress Theme " href="http://www.themespira.com/2014/03/universe-education-responsive-wordpress.html" target="_top"><img class="label_thumb" src="http://1.bp.blogspot.com/-ZO2GFO9aAlA/UylO1U8pB5I/AAAAAAAAJzI/uLYVXKRIS3w/s250/Universe-Education-Responsive-WordPress-Theme.jpg" /></a>
   </li>
    <li>
        <a class="screenshot" rel="http://2.bp.blogspot.com/-tc9sVwz_w6c/UyZEXqqMkLI/AAAAAAAAJn8/ZdWKVD-ArNU/s250/NativeChurch-Multi-Purpose-Wordpress-Theme.jpg" title="NativeChurch - Multi Purpose Wordpress Theme" href="http://www.themespira.com/2014/03/nativechurch-multi-purpose-wordpress.html" target="_top"><img class="label_thumb" src="http://2.bp.blogspot.com/-tc9sVwz_w6c/UyZEXqqMkLI/AAAAAAAAJn8/ZdWKVD-ArNU/s250/NativeChurch-Multi-Purpose-Wordpress-Theme.jpg" /></a>
   </li>
    <li>
        <a class="screenshot" rel="http://3.bp.blogspot.com/-sikIahHxE1k/UyOoewHLVvI/AAAAAAAAJmY/8jUFOejVQYI/s250/Sonata-Elegant-Multi-purpose-Wordpress-Theme.jpg" title="Sonata - Elegant Multi-purpose Wordpress Theme " href="http://www.themespira.com/2014/03/sonata-elegant-multi-purpose-wordpress.html" target="_top"><img class="label_thumb" src="http://3.bp.blogspot.com/-sikIahHxE1k/UyOoewHLVvI/AAAAAAAAJmY/8jUFOejVQYI/s250/Sonata-Elegant-Multi-purpose-Wordpress-Theme.jpg" /></a>
   </li>
</ul>

CSS

ul li {
    margin-top:30px;
    list-style:none;
    float:left;
    padding:5px;
}

body {
color: #444;
font-family: Tahoma,Geneva,sans-serif;
font-size: 13px;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: normal;
margin: 0;
text-align: left;
}

#screenshot {
position: absolute;
margin-top: -100px;
border: 1px solid #000;
background: #333333;
padding: 9px 9px 30px 9px;
color: #fff;
overflow: hidden;
width: 320px;
height: 163px;
z-index: 999;
line-height: 14px;
}

JavaScript

function screenshotPreview() {	
	/* CONFIG */		
		xOffset = 10;
		yOffset = 30;		
		// these 2 variable determine popup's distance from the cursor
		// you might want to adjust to get the right result		
	/* END CONFIG */
	$("a.screenshot").hover(function(e){
		this.t = this.title;
		this.title = "";	
		var c = (this.t != "") ? "<br/>" + this.t : "";
		$("body").append("<p id='screenshot'><img alt='url preview' src='"+ this.rel +"'/>"+ c +"</p>");								 
		$("#screenshot")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px")
			.fadeIn("fast");						
    },
	function(){
		this.title = this.t;	
		$("#screenshot").remove();
    });	
	$("a.screenshot").mousemove(function(e){
		$("#screenshot")
			.css("top",(e.pageY - xOffset) + "px")
			.css("left",(e.pageX + yOffset) + "px");
	});			
};
// starting the script on page load
$(document).ready(function(){
	screenshotPreview();
});