在CSS中使用type = radio缩小图像

我正在尝试仅使用CSS和HTML来互斥地放大和缩小页面上的图像。互斥的意思是,如果有两个图像放大了一个图像,那么如果我放大第二个图像(查看代码段),则放大的图像应该缩小。此功能非常有效,但无法再缩小图像。

我该如何解决?

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>