Zoom in and out on mouse click with CSS

Question

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

Answer 1

Building on @Nhan answer: https://stackoverflow.com/a/39859268/661872

Shorter, scoped and does not require tracking ids for multiple elements.

.click-zoom input[type=checkbox] {
  display: none
}

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

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