Zoom in and out on mouse click with CSS

Let's use a trick here, an input checkbox:

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

.container 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="container">
  <input type="checkbox" id="zoomCheck">
  <label for="zoomCheck">
    <img src="https://via.placeholder.com/200">
  </label>
</div>

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
}
<div class="click-zoom">
  <label>
    <input type="checkbox">
    <img src="https://via.placeholder.com/200">
  </label>
</div>

<div class="click-zoom">
  <label>
    <input type="checkbox">
    <img src="https://via.placeholder.com/200">
  </label>
</div>

Tags:

Css

Recent Posts