Zoom out of image using type=radio in CSS

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>