JSFiddle - React, Tailwind, and code Playground

by Shannenpio Cloning

HTML

<div class="post-body">

<img alt="Wabah Virus Corona" height="400" src="https://4.bp.blogspot.com/-_u99FAI4TfM/XpcI9O4XIrI/AAAAAAAAAFk/kB5i7u06p9AYMaVOHHChxXRchVQtfiQFgCLcBGAsYHQ/s400/v-1.jpg" title="Wabah Virus Corona" width="400" />

<img alt="Wabah Virus Corona" height="400" src="https://3.bp.blogspot.com/-ia3-pObr6A0/XpcI-bmF_oI/AAAAAAAAAFo/usL_bzhe4Wg2NC0wm7sPW0hkoatgcVFwwCLcBGAsYHQ/s400/v-2.jpg" title="Wabah Virus Corona" width="400" />

<img alt="Wabah Virus Corona" height="400" src="https://1.bp.blogspot.com/-Uqh1AxeleTk/XpcI-93PZFI/AAAAAAAAAFs/KVFKmSrGQlEzAcJqoDtC5IrAthjPXVs3ACLcBGAsYHQ/s400/v-3.jpg" title="Wabah Virus Corona" width="400" />

</div>

CSS

img{width:auto;max-width:100%;height:auto;}
.zoomclick.active{position:fixed;top:0;left:0;bottom:0;right:0;z-index:9999999;background:#000;}
.zoomclick.active img{height:100%;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);}
.flow{overflow:hidden;position:relative;}
.zoomclick.active:after{content:"";cursor:pointer;width:40px;height:40px;background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='34' height='34' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23cccccc' d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-position:top right;-webkit-background-size:40px 40px;background-size:40px 40px;position:absolute;top:10px;right:10px;z-index:2;opacity:0;transition:all .4s ease-in-out}
.zoomclick.active:hover:after{opacity:.8}
@media screen and (max-width:800px){.zoomclick.active img{width:100%;height:auto;}}

JavaScript

function wrap(t,e,r){for(var i=document.querySelectorAll(e),o=0;o<i.length;o++){var a=t+i[o].outerHTML+r;i[o].outerHTML=a}}wrap("<div class='zoomclick'>",".post-body img","</div>");

var container = document.getElementsByClassName("zoomclick");

for (var i = 0; i < container.length; i++) {
  //For each element in the container array, add an onclick event.
  container[i].onclick = function(event) {
    this.classList.toggle('active');
    var element = document.body;
    element.classList.toggle('flow');
  }
}