JSFiddle - React, Tailwind, and code Playground
HTML
<div id="divUploadsPreview" style="width: 930px; text-align: left; margin: 0 auto">
<div style="display: inline-table; padding-left: 7px; padding-right: 7px; padding-bottom: 7px">
<div style="display: block; width: 100px; text-align: center;">
<a href="#"> </a>
</div>
<div style="display: block; width: 100px; text-align: center;">
<a class="prevItem" href="#">Hover over this!</a>
</div>
</div>
</div>
CSS
#preview {
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
JavaScript
$(function() {
$("a[class^='prevItem']").hover(function(e) {
var className = $(this).attr('class');
className = className.replace('prevItem_', '');
var url = '<p id="preview"><img style="width: 250px; height: 250px;" src="https://web1.pconsite.com/ActiveDigitalSignage/UploadPreviewer.ashx?fileId=520_-_0707201414595482370_-_Blue_32_Sports_Grill.jpg" href="DownloadFile.ashx?fileId=520_-_0707201414514820978_-_Blue_32_Sports_Grill.jpg" alt="image" /></p>';
$('body').append(url);
$('#preview').css("top", (e.pageY - 10) + "px").css("left", (e.pageX + 30) + "px").fadeIn("fast");
},
function() {
$('#preview').remove();
});
$("a[class^='prevItem']").mousemove(function (e) {
$('#preview').css("top", (e.pageY - 10) + "px").css("left", (e.pageX + 30) + "px");
});
});
//520_-_0707201414514820978_-_Blue_32_Sports_Grill.jpg" href="DownloadFile.ashx?fileId=520_-_0707201414514820978_-_Blue_32_Sports_Grill.jpg