CrowdFlower Markup Language: selecting one of the two images by clicking

Question

I am designing a Figure-Eight (CrowdFlower) job and need to change its CML (similar to HTML) and custom CSS so that when I click on an image it gets selected (rather than the traditional Radio Buttons) Here is the CML file:

<div class="row-fluid row">
  <div class="span12 well outer-well col-sm-12 col-md-12">
    <div class="well-white">
      <p class="text-center">Please look carefully at the following two images and decide which one is more visually complex. 
        <!--<strong class="query">{{query}}</strong>-->
      </p>
    </div>
  </div>
</div>
<br />
<div class="row-fluid row">
  <div class="space">
    <cml:radios label="A or B?" validates="required ss-required">
      <div class="span6 col-sm-6 col-md-6 center">
        <label>
          <cml:radio  label="A" value="A"></cml:radio>
          <img src="{{image_1}}" class="image-object img-polaroid" width="400px" height="500px" />
        </label>
      </div>

      <div class="span6 col-sm-6 col-md-6 center">
        <label>
          <cml:radio  label="B" value="B" ></cml:radio>

          <img src="{{image_2}}" class="image-object img-polaroid" width="400px" height="500px" />
        </label>
      </div>
    </cml:radios>
  </div>
</div>

<div class="row-fluid row">
  <div class="span6 col-sm-6 col-md-6">
    <p class="text-center indicator">A</p>
  </div>
  <div class="span6 col-sm-6 col-md-6">
    <p class="text-center indicator">B</p>
  </div>
</div>
<div class="row-fluid row">
</div>

Here is the CSS file:

/* Well magic */
.well-white {
  background-color: white;
}

.well-white p {
  margin-bottom: 0px;
}

.center {
  text-align: center;
}

.well {
  margin-bottom: 0px;
  padding: 15px;
}

.outer-well {
  margin-bottom: 10px;
}

.cml_field.radios label {
  display:inline;
}

.legend {
  font-weight: 300 !important;
}




.query {
  font-size: 150%;
  margin-left: 10px
}


.indicator {
  font-size: 500%;
}


.space {
  height: 300px;
}

label > input{ /* HIDE RADIO */
  visibility: hidden; /* Makes input not-clickable */
  position: absolute; /* Remove input from document flow */
}
label > input + img{ /* IMAGE STYLES */
  cursor:pointer;
  border:2px solid transparent;
}
label > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
  border:10px solid #f00;
}

I want something like this example but to be able to click on one of the two images and draw a red border of 10 pixel around it and save the answer: https://jsfiddle.net/qpxvdu0z/

My job is shown as below though: Basically images are not even shown side by side.

Basically, I followed this stackoverflow to create the jsfiddle but doesn't work in Figure-Eight https://stackoverflow.com/a/17541916/2414957