Radio button change image when checked

Question

What I've wanted to happen that there are only images to be displayed and these images are RADIO BUTTONS , everytime I select or do checked I want to change the image of it.

something like this:

Here's my code so far.

 .button input[type="radio"] { display: none; } .button input[type=radio]:checked + label>img { background:url("https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png") no-repeat; } .button input[type=radio]:hover + label>img { -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); } 

 <div class="button"> <input type="radio" id="but1" name="sel_button" /> <label for="close"> <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-close-circled-128.png" alt="close_icon"/> </label> <input type="radio" id="but2" name="sel_button" /> <label for="bulb"> <img src="https://image.flaticon.com/icons/png/128/117/117944.png" alt="bulb_icon"/> </label> </div> 

They can't seem to be clickable and my hover isn't working. Thank you in advance!

Answer 1

You are not using value inside 'for' attribute correctly. It should be the id of the element it is referring

 .button input[type="radio"] { display: none; } .button input[type=radio]:checked + label > img { background: url("https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-128.png") no-repeat; } .button input[type=radio]:hover + label >img { -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); } 

 <div class="button"> <input type="radio" id="but1" name="sel_button"> <label for="but1"> <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-close-circled-128.png" alt="close_icon"/> </label> <input type="radio" id="but2" name="sel_button"> <label for="but2"> <img src="https://image.flaticon.com/icons/png/128/117/117944.png" alt="bulb_icon"/> </label> </div>