zoom image

by kompiajaib

HTML

<div class="post-body">

<img alt="Kertas Buket Bunga" height="400" src="https://2.bp.blogspot.com/-vmgogzohuM0/XoQV3b4Y7YI/AAAAAAAALuM/uVtUBqedir8VvY3G8Ut2DriJM6VrBRGLQCLcBGAsYHQ/s400/dds%2B01.jpg" title="Kertas Buket Bunga" width="400" />

<img alt="Kertas Buket Bunga" height="400" src="https://3.bp.blogspot.com/-pFVreUKYoGk/XoQV8Ke6CPI/AAAAAAAALuQ/omahDM7hOq0q8-Y36eY7inEeSaaytp8HwCLcBGAsYHQ/s400/dds%2B04.jpg" title="Kertas Buket Bunga" width="400" />

<img alt="Kertas Buket Bunga" height="400" src="https://2.bp.blogspot.com/-mo4AcOJukaw/XoQWBAVfuQI/AAAAAAAALuk/zqjQSzeS0c08TSO-zJfPBPW84Ww1tosDwCPcBGAYYCw/s400/dds%2B03.jpg" title="Kertas Buket Bunga" 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');
  }
}