Although CSS was not originally intended for this purpose, here is a creative workaround I like to call a "BODGE." By utilizing the :checked pseudo class and attaching it to a pseudo element of a checkbox, you can dynamically change its background image.
For some added fun, I've included robot pictures for you to play around with ;)
CSS:
input[type="checkbox"] {
content: url('http://www.thelemming.com/lemming/POP-CULTURE/asimo-robot_48.jpg');
display: block;
width: 200px;
height: 200px;
border: 1px solid black;
}
input[type="checkbox"]:checked {
content: url('http://www.sstscorp.in/images/QRIO.jpg.jpg');
}
.native-hidden {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
HTML:
<input class="native-hidden" type="checkbox" />
Feel free to customize the images in the CSS with your own robot pictures. The input[type="checkbox"] will display your first image on page load, and input[type="checkbox"]:checked will show the picture when clicked.
Check out the code snippet on JsFiddle for a live demo!