Click button and change image color using css only ( jQuery not needed)

input[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 25px;
  height: 25px;
  background-size: 225px 70px;
  border-radius: 3px;
  z-index: 99999;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000;
}

input[type='radio']:hover{
  -webkit-filter: opacity(.4);
  filter: opacity(.4);   }

.red{ background: red; }

.red:checked{ background: linear-gradient(brown, red) }

.green{ background: green; }

.green:checked{ background: linear-gradient(green, lime);}

.red:checked ~ img,.red:checked ~ p img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 red);
  filter: opacity(.5) drop-shadow(0 0 0 red);
}

.green:checked ~ img,.green:checked ~ p img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 green);
  filter: opacity(.5) drop-shadow(0 0 0 green);
}

  <input class='red' name='color' type='radio' />
  <input class='green' name='color' type='radio' />
 
  <img src="https://i.stack.imgur.com/bd7VJ.png"/>

   
   <p><strong><a>sample1</a></strong><br><a id="sample1"><img src="https://i.stack.imgur.com/bd7VJ.png" alt="sample1" height="74" title="sample1" class="invert"></a></p>
   
  <p><strong><a>sample2</a></strong><br><a id="sample2"><img src="https://i.stack.imgur.com/bd7VJ.png" alt="sample1" height="74" title="sample2" class="invert"></a></p>