<h2>Click the Image</h2>
<div id=checkbox>
  <input type=checkbox />
  <img id=img-checked src=https://bit.ly/2b6aARQ   />
  <img id=img-unchecked src=https://bit.ly/2bksyyM  />
</div>


<div id="browser-support">
  <small>
    <strong>Image credits:</strong>
    <a href="http://erikeliasson.io/">Erik Ragnar Eliasson</a>
    , via <a href="https://www.iconfinder.com/">Iconfinder</a>.
  </small>
</div>

#checkbox 
{
  height: 256px;
  width: 256px;
  position: relative;
}

#checkbox * 
{
  position: absolute;
}

input[type="checkbox"] 
{
  width: 100%;
  height: 100%;
  cursor: pointer;
}

#img-unchecked
,#img-checked 
{
  pointer-events: none;
}

input[type="checkbox"] 
,#img-checked 
,input[type="checkbox"]:checked ~ #img-unchecked 
{
  opacity: 0;
}

input[type="checkbox"]:checked + #img-checked 
{
  opacity: 1;
}

body 
{
  font-family: courier new;
}

#browser-support 
{
  background: ivory;
  border-left: 6px skyblue solid;
  font-size: 14px;
  margin: 12px 0;
  padding: 6px;
}