title: Allow one zoomed image at a time
body: <p>I am using a fairly nice zoom-in / zoom-out effect using only CSS and HTML. The issue I am having is that if a user zooms in on two images, both images will be enlarged on the page. This is technically what it should do, however I am wondering how I can disable this effect.</p>
  
  <p>This is what I am looking for: e.g. there are two images on a page. If I zoom in one one image and then zoom in on the other image (while the first image is zoomed), the first image should zoom out to allow the second image to be the only zoomed image on the page. This principle would apply if there were, for example, ten images -- only one image can be zoomed at any time. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input[type=checkbox] {
  display: none;
  }
  
  .container img {
  width: 100%;
  transition: transform 0.25s ease;
  cursor: zoom-in;
  }
  
  input[type=checkbox]:checked ~ label &gt; img {
  transform: scale(2.5);
  cursor: zoom-out;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;input type="checkbox" id="zoomCheck1"&gt;
      &lt;label for="zoomCheck1"&gt;
      &lt;img src="https://www.vintagevelo.co.uk/wp-content/uploads/2018/02/DSC_0040-768x512.jpg" /&gt;
      &lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
      &lt;input type="checkbox" id="zoomCheck2"&gt;
      &lt;label for="zoomCheck2"&gt;
      &lt;img src="https://premium-cycling.com/wp-content/uploads/2018/05/FAGGIN-Campione-del-mondo-1980s-frameset-7.jpg" /&gt;
      &lt;/label&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>