JSFiddle - React, Tailwind, and code Playground

by Junaid Ahmed

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://dropfruitduo.github.io/jquery.zoomooz.min.js"></script>
<body>
    <img src="https://i.imgur.com/e1TsDx0.png" id="abc"/>
</body>

CSS

img {
    width: 100px;
    border: 1px solid black;
    border-color: rgba(0, 0, 0, 0);
    margin-left: 10px;
    transition: border-color 600ms;
  }
  img.hover {
    border: 1px solid black;
    transition:border-color 0s;
  }
  
  .zoomedimg {
    border-color: rgba(0, 0, 0, 1);
  }

JavaScript

$(document).ready(function() {

	$("img").on('mouseover', function(){
  	$("img").addClass('hover');
  });
  
	$("img").on('mouseout', function(){
  	$("img").removeClass('hover');
  });

  $("img").click(function(evt) {
    event.stopPropagation()

    if ($("img").hasClass('zoomedimg')) {
      $("img").removeClass('zoomedimg').removeClass('hover');
      $("body").zoomTo();

    } else {
      $("img").addClass('zoomedimg');
      $("img").zoomTo();
    }
  });
  $(window).click(function(evt) {
    $("body").zoomTo({});
    $("img").removeClass('zoomedimg').removeClass('hover');
  });

});