JSFiddle - React, Tailwind, and code Playground

by Daniel Herzog Cruz

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="comment">
  Look at this image: https://media.giphy.com/media/9fbYYzdf6BbQA/giphy.gif.
</div>


<div id="image-preview" class="hidden">
  <span class="loading">Loading...</span>
  <div class="image-preview-wrapper">
    <!-- Our image will go inside this container. -->
  </div>
</div>

CSS

#image-preview {
  position: absolute;
  overflow: hidden;

  margin-top: 20px;
  padding: 5px;

  min-width: 100px;
  max-width: 400px;
  min-height: 100px;
  max-height: 400px;

  background-color: black;
  color: white;

  z-index: 1;
}

#image-preview .image-preview-wrapper img {
  max-width: 400px;
  max-height: 400px;
}

.hidden {
  visibility: hidden;
}

JavaScript

$(document).ready(function() {
  var re = /(https?:\/\/(?:[a-z0-9\-]+\.)+[a-z0-9]{2,6}(?:\/[^/#?]+)+\.(?:jpg|jpeg|gif|png))/g;

  $('.comment').html(function () {
    return $(this).html().replace(re, "<a target='_blank' class='image-preview-link' href='$1'>$1</a>"); 
  });
});

$(document).on("mouseover", ".image-preview-link", function() {
  var position = $(this).offset(); 
  $("#image-preview").css(position);

  var img = $("<img>", { src: $(this).attr("href") });
  $("#image-preview .loading").show();
  img.hide();
  img.load(function() {
    $("#image-preview .loading").hide();
    img.show();
  });
  $("#image-preview .image-preview-wrapper").empty().append(img);

  $("#image-preview").removeClass("hidden");
});

$(document).on("mouseout", ".image-preview-link", function() {
  $("#image-preview").addClass("hidden");
});