Zoom in and out on mouse click with CSS
<p>I want to zoom image with only CSS. The code below zooms the image when the left button of the mouse is kept pressed but I want to zoom in and out with a mouse click. How can I achieve that?</p>

<pre><code>.container img {
  transition: transform 0.25s ease;
  cursor: zoom-in;
}

.container img:active {
  -webkit-transform: scale(2);
  transform: scale(2);
  cursor: zoom-out;
}
</code></pre>