CSS check not focus - css

Question

How do I get the animation to occur on :check of radio button instead of :focus?
I tried .radio-button:checked ~ .item-tile and input[type=radio]:checked + .item-tile both not working.
.item .radio-button:focus+.item-tile {
border: 2px solid #079ad9;
-webkit-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
.item-wrap {
display: flex;
}
.item-tile {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 15px;
background: white;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 50px;
border-radius: 10px;
}
.item-tile label {
border: 1px solid;
flex: 0;
padding: 0px 10px 0px 5px;
}
.icon {
margin: 0px 5px 0px 5px;
position: relative;
height: 35px;
width: 35px;
border-radius: 50%;
}
.item {
position: relative;
}
.item .radio-button {
opacity: 0;
position: absolute;
top: 0;
left: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
z-index: 999;
cursor: pointer;
}
.item .item-tile {
-webkit-transition: -webkit-transform 300ms ease;
transition: -webkit-transform 300ms ease;
-o-transition: transform 300ms ease;
transition: transform 300ms ease;
transition: transform 300ms ease, -webkit-transform 300ms ease;
}
<div class="container">
<div class="item-wrap">
<div class="item">
<input id="blue" class="radio-button" type="radio" name="radio" />
<div class="item-tile">
<div class="icon" style="background-color:blue;">
</div>
<label for="blue" class="item-tile-label"><text class="item-text">Blue</text></label>
</div>
</div>
<div class="item">
<input id="elephant" class="radio-button" type="radio" name="radio" />
<div class="item-tile">
<div class="icon" style="background-color:red;">
</div>
<label for="elephant" class="item-tile-label"><text class="item-text">Elephant</text></label>
</div>
</div>
</div>

Answer 1

You'd be looking for .item .radio-button:checked + .item-tile:
.item .radio-button:checked + .item-tile {
border: 2px solid #079ad9;
-webkit-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
.item-wrap {
display: flex;
}
.item-tile {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 15px;
background: white;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 50px;
border-radius: 10px;
}
.item-tile label {
border: 1px solid;
flex: 0;
padding: 0px 10px 0px 5px;
}
.icon {
margin: 0px 5px 0px 5px;
position: relative;
height: 35px;
width: 35px;
border-radius: 50%;
}
.item {
position: relative;
}
.item .radio-button {
opacity: 0;
position: absolute;
top: 0;
left: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
z-index: 999;
cursor: pointer;
}
.item .item-tile {
-webkit-transition: -webkit-transform 300ms ease;
transition: -webkit-transform 300ms ease;
-o-transition: transform 300ms ease;
transition: transform 300ms ease;
transition: transform 300ms ease, -webkit-transform 300ms ease;
}
<div class="container">
<div class="item-wrap">
<div class="item">
<input id="blue" class="radio-button" type="radio" name="radio" />
<div class="item-tile">
<div class="icon" style="background-color:blue;">
</div>
<label for="blue" class="item-tile-label"><text class="item-text">Blue</text></label>
</div>
</div>
<div class="item">
<input id="elephant" class="radio-button" type="radio" name="radio" />
<div class="item-tile">
<div class="icon" style="background-color:red;">
</div>
<label for="elephant" class="item-tile-label"><text class="item-text">Elephant</text></label>
</div>
</div>
</div>