Html Click Image Pop Up

I want when I click the image then showing big size image for me, like this demo. This is my image code. And please make in one html file, because this is just a webview by html ed

Solution 1:

Try this method may hope it will work for you

 input[type=checkbox] {
  display: none;
}

.layout img {
  margin: 100px;
  transition: transform 0.25s ease;
  cursor: zoom-in;
}

input[type=checkbox]:checked ~ label > img {
  transform: scale(2);
  cursor: zoom-out;
}


<div class="layout">
  <input type="checkbox" id="zoomCheck">
  <label for="zoomCheck">
    <img src="https://placehold.it/200">
  </label>
</div>