title: Use images like checkboxes
body: <p>I would like to have an alternative to a standard checkbox - basically I'd like to use images and when the user clicks the image, fade it out and overlay a tick box.</p>
  
  <p>In essence, I want to do something like Recaptcha 2 does when it gets you to click images that meet a certain criteria. You can <a href="https://www.google.com/recaptcha/api2/demo" rel="noreferrer">see a Recaptcha demo here</a> but it might sometimes get you to solve text questions, as opposed to the image selection. So here's a screenshot:</p>
  
  <p><img src="https://i.stack.imgur.com/d0yEE.png" alt="Google Recaptcha screenshot"></p>
  
  <p>When you click one of the images (in this case, containing a picture of steak), the image you click shrinks in size and the blue tick appears, indicating that you've ticked it.</p>
  
  <p>Let's say I want to reproduce this exact example.</p>
  
  <p>I realise I can have 9 hidden checkboxes, and attach some jQuery so that when I click the image, it selects/deselects the hidden checkbox. But what about the shrinking of the image/overlaying the tick?</p>