JSFiddle - React, Tailwind, and code Playground

HTML

<input type="radio" class="btn1" value="" name="item" id="radio1">
<label class="label1" for="radio1"></label>

<!-- <img src="http://www.fancyicons.com/free-icons/122/hallowen/png/256/black_cat_256.png"> -->

<!--  other picture, this picture should be visible, when I click at the cat: 
<label class="label2"><img src="http://pix.iemoji.com/images/emoji/apple/ios-9/256/dog-face.png"></label>-->

CSS

.btn1{
  display: none;
}

.btn1 + label {
  display: block;
  width: 256px;
  height: 256px;
  background-image: url("http://www.fancyicons.com/free-icons/122/hallowen/png/256/black_cat_256.png");
}

.btn1:checked + label {
  background-image: url("http://pix.iemoji.com/images/emoji/apple/ios-9/256/dog-face.png");
}