Уменьшите изображение, используя type=radio в CSS ⇐ Html

[Anonymous]

Я пытаюсь обеспечить взаимоисключающее увеличение и уменьшение изображений на странице, используя только 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;
}

Код: Выделить всё

[img]https://www.vintagevelo.co.uk/wp-content/uploads/2018/02/DSC_0040-768x512.jpg[/img]




[img]https://premium-cycling.com/wp-content/uploads/2018/05/FAGGIN-Campione-del-mondo-1980s-frameset-7.jpg[/img]

Подробнее здесь: https://stackoverflow.com/questions/619 ... dio-in-css