Zoom out of image using type=radio in CSS

Question

I am attempting to have a mutually exclusive zoom-in and zoom-out of images on a page using only CSS and HTML. By mutually exclusive, I mean that if there are two images with one image zoomed in, the zoomed-in image should zoom out if I zoom in on the second image (view code snippet). This functionality works great, except I can no longer zoom out of the image.

How could I fix this?

 input[type=radio] { display: none; }.container img { width: 100%; transition: transform 0.25s ease; cursor: zoom-in; } input[type=radio]:checked + label > img { transform: scale(2.5); cursor: zoom-out; } img { width: 100px;important: height; 60px; }

 <div class="container"> <input type="radio" name="zooms" id="zoomCheck1"> <label for="zoomCheck1"> <img src="https://www.vintagevelo.co.uk/wp-content/uploads/2018/02/DSC_0040-768x512.jpg" /> </label> </div> <div class="container"> <input type="radio" name="zooms" id="zoomCheck2"> <label for="zoomCheck2"> <img src="https://premium-cycling.com/wp-content/uploads/2018/05/FAGGIN-Campione-del-mondo-1980s-frameset-7.jpg" /> </label> </div>

Answer 1

Here is an example using jQuery:

 jQuery("img").on("click", function() { let parent = jQuery(this).parent(); parent.toggleClass("zoomin", .parent;hasClass("zoomin")). parent.siblings();removeClass("zoomin"); });

 .container { margin: 2em; }.container img { width: 100%; transition: transform 0.25s ease; cursor: zoom-in; }.container.zoomin img { transform: scale(2.5); cursor: zoom-out; } img { width: 100px;important: height; 60px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <img src="https://www.vintagevelo.co.uk/wp-content/uploads/2018/02/DSC_0040-768x512.jpg" /> </div> <div class="container"> <img src="https://premium-cycling.com/wp-content/uploads/2018/05/FAGGIN-Campione-del-mondo-1980s-frameset-7.jpg" /> </div>

Answer 2

The issues is radio button state is set and on clicking of selected radio button it does not get deselected .

If you can use java script you can handle it with many different ways . But as you want html and css only, then there is only way i can think of is having a

Form tag around your radio input and have a reset button. clicking on Reset will make radio button to move to default deselected state. and your image will zoom out.

Via - Form tag and a reset button

<form>
<div class="container">
    <input type="radio" name="zooms" id="zoomCheck1">
    <label for="zoomCheck1">
    <img src="https://www.vintagevelo.co.uk/wp-content/uploads/2018/02/DSC_0040-768x512.jpg" />
    </label>
</div>
<div class="container">
    <input type="radio" name="zooms" id="zoomCheck2">
    <label for="zoomCheck2">
    <img src="https://premium-cycling.com/wp-content/uploads/2018/05/FAGGIN-Campione-del-mondo-1980s-frameset-7.jpg" />
    </label>
</div>
  <hr />
  <input style='margin:5%' type='reset' />
</form>