title: Zoom in and out on mouse click with CSS
body: <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>