JSFiddle - React, Tailwind, and code Playground

by Moslem Hady

HTML

<div class="container">
<img class="thumbnail" src="https://thumb-tf.s3.envato.com/files/141892492/icon.png" title="">    
<img class="hidden-large" src="https://preview-tf.s3.envato.com/files/141892504/screenshot.__large_preview.jpg">
</div>

CSS

img.hidden-large {
  display: none;
  z-index:1000;  
}
img.thumbnail {
  cursor: pointer;
}

JavaScript

jQuery('img.thumbnail').hover( function() {
var pos = jQuery(this).position();
var outerwidth = jQuery(".container").width();
var width = jQuery(this).outerWidth();
    
var img = new Image();
img.src = 'https://preview-tf.s3.envato.com/files/141892504/screenshot.__large_preview.jpg';    
var largeimgwidth = img.width;

    
    
if((outerwidth-width) > largeimgwidth) {
jQuery("img.hidden-large").css({
position: "absolute",
top: pos.top + "px",
left: (pos.left + width) + "px"
}).toggle();       
}

});