JSFiddle - React, Tailwind, and code Playground

by Baliga

HTML

<img src="https://lh3.googleusercontent.com/jN9tX6dCJ6_XL9E4K1KCO2Tuwe9_rYUbwv723eu6XGI0PWGLcPs0259VscOu249PPKKcU5AOXrq6JnleEaoK6K_JvZ2PY9lw3pMApzOpTQ=s660" alt="image 1" class="img-responsive">
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.  </p>
                <p><button class="btn btn-primary" type="button">View details</button></p>

JavaScript

$(function(){
  $(".img-responsive").hover(function(e) { 
  
  /* fetching attributes from img tag */
      var alt = $(this).attr("alt");
      var src = $(this).attr("src");
      var newsrc = src.replace("small","medium");

			/* creating preview element */
      var preview= $('<div id="preview"><img src=' + newsrc + '><p>' + alt + '</p></div>'); 
      
      //inorder to prevent multiple previews
			$("#preview").remove();      
      
      //adding the preview to DOM
      $("body").append(preview);
  });
});