There is a code (below). How to make the image change to another when clicked?

.feature-block { width: 270px; height: 320px; margin: 25px; background: #fff; box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; align-items: center; } .feature-block-img { display: block; margin: 35px auto 0; padding-top: 35px; } .feature-block-line { display: block; width: 70px; height: 2px; background: #EDEDED; margin: 20px auto 0; } .feature-block-title { text-align: center; font-family: "Roboto Regular"; font-size: 16px; } .feature-block p { margin: 20px 10px 0; text-align: center; line-height: 22px; font-family: "Roboto Light"; font-size: 12px; } #block-radio-1 { display: none; } input:checked + label .feature-block { color: #fff; background: #00B533; } 
 <input type="radio" id="block-radio-1" name="block-select"> <label for="block-radio-1"> <div class="feature-block"> <div class="feature-block-header"> <img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Simbolo_konoha.svg" class="feature-block-img" alt=""> <div class="feature-block-line"></div> <p class="feature-block-title">Title</p> <p>Some text</p> </div> </div> </label>

    1 answer 1

    Add two pictures to the page, hide one - show the other. When you click - the first show, the second hide.

     .feature-block { width: 270px; height: 320px; margin: 25px; background: #fff; box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; align-items: center; } .feature-block-img { display: block; margin: 35px auto 0; padding-top: 35px; } .feature-block-line { display: block; width: 70px; height: 2px; background: #EDEDED; margin: 20px auto 0; } .feature-block-title { text-align: center; font-family: "Roboto Regular"; font-size: 16px; } .feature-block p { margin: 20px 10px 0; text-align: center; line-height: 22px; font-family: "Roboto Light"; font-size: 12px; } #block-radio-1 { display: none; } .checked-img { display: none; } input:checked + label .feature-block { color: #fff; background: #00B533; } input:checked + label .checked-img{ display: block; } input:checked + label .unchecked-img{ display: none; } 
     <input type="radio" id="block-radio-1" name="block-select"> <label for="block-radio-1"> <div class="feature-block"> <div class="feature-block-header"> <img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Simbolo_konoha.svg" class="feature-block-img unchecked-img" alt=""> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/505px-Cat_silhouette.svg.png" class="feature-block-img checked-img"> <div class="feature-block-line"></div> <p class="feature-block-title">Title</p> <p>Some text</p> </div> </div> </label>