Checkbox with image and overlayed image on checked state

I need help for checkbox using CSS only.

First of all it function correctly. However, I want to overlay the checked image on top of the unchecked image when the button is clicked. How to achieve this?

.frm_checkbox {border: 1px solid red;}

.frm_checkbox input[type="checkbox"] {display: none; }

input#field_32gyuu-0 {
        background: url('http://ift.tt/1ZtIANv') 0 0px no-repeat;
    z-index: 10;
        content: "";
        display: inline-block;
        font-size: 12px;
        height: 75px;
        width: 75px;
        line-height: 16px;
        margin: -2px 6px 0 0;
        text-align: center;
        vertical-align: middle;
}

#frm_checkbox_112-0 input[type="checkbox"]:checked + label:before {
        background: url('http://ift.tt/1mVr6ry') 0 0px no-repeat;
        height: 75px;
        width: 75px;
}

<div id="frm_field_162_container" class="frm_form_field form-field  form-group frm_top_container">
    <label  class="frm_primary_label control-label">Checkboxes
        <span class="frm_required"></span>
    </label>
    <div class="frm_opt_container">
        <div class="frm_checkbox checkbox" id="frm_checkbox_162-0">
            <label for="field_32gyuu-0">
                <input type="checkbox" name="item_meta[162][]" id="field_32gyuu-0" value="Option 1"  /> Option 1</label>
        </div>
        <div class="frm_checkbox checkbox" id="frm_checkbox_162-1">
            <label for="field_32gyuu-1">
                <input type="checkbox" name="item_meta[162][]" id="field_32gyuu-1" value="Option 2"  /> Option 2</label>
        </div>
    </div>
</div>