zoom image

by kompiajaib

HTML

<div class="post-body">

<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-Yf6bAZUx66s/YLXowF8F3dI/AAAAAAABR3I/Q2oumADcy5syQc3c_Qg3s2wC4BBJ-qRjgCLcBGAsYHQ/s750/editan-pakar-photoshop-3.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Minta ditambahkan air terjun dan yang hijau-hijau. Foto: dok James Fridman" border="0" data-original-height="750" data-original-width="750" src="https://1.bp.blogspot.com/-Yf6bAZUx66s/YLXowF8F3dI/AAAAAAABR3I/Q2oumADcy5syQc3c_Qg3s2wC4BBJ-qRjgCLcBGAsYHQ/s16000/editan-pakar-photoshop-3.jpeg" title="Minta ditambahkan air terjun dan yang hijau-hijau. Foto: dok James Fridman" /></a></div>

</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

for (var imageslazy = document.querySelectorAll(".post-body .separator img"), i = 0; i < imageslazy.length; i++) imageslazy[i].setAttribute("onclick", "return false");

function wrap(o, t, e) {
  for (var i = document.querySelectorAll(t), c = 0; c < i.length; c++) {
    var a = o + i[c].outerHTML + e;
    i[c].outerHTML = a
  }
}
wrap("<div class='zoomclick'>", ".post-body .separator a", "</div>");
for (var containerimg = document.getElementsByClassName("zoomclick"), i = 0; i < containerimg.length; i++) containerimg[i].onclick = function() {
  this.classList.toggle("active");
  var o = document.body;
  o.classList.toggle("flow")
};