Изображение радиометки с помощью CSS Combinator для «проверенной» функции? [дубликат] ⇐ CSS

[Anonymous]

Codepen Link
Я пытаюсь преобразовать изображение метки при щелчке, чтобы масштабировать его и установить непрозрачность 100 %, но не могу понять, как правильно пометить его, учитывая текущий синтаксис.
Я знаю, что .console input[type=radio]:checked верен, потому что он будет отображать рамку вокруг переключателя. Я перепробовал все комбинации >, ~ и +, которые только мог придумать, но, должно быть, упускаю что-то очевидное.











































.container {
background: black;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(10,minmax(0, 1fr));
justify-content: space-around;
gap: .25em;
height: 700px;
width: 100px;
}

input[type=radio] {
display: none;
}

.container-select {
padding: 0px;
height: 1fr;
display: flex;
align-items: center;
justify-content: center;
}

.container-select img {
object-fit: contain;
width: 90%;
height: 100%;
opacity: 50%;
display: block;

&:hover {
opacity: 100%;
transition: opacity 250ms;
}
}

.container input[type=radio]:checked + label {
transform: scale(1.1);
opacity: 100%;
}


Подробнее здесь: https://stackoverflow.com/questions/785 ... d-function