How to deal with Active/Inactive/Hovered images for each Checkbox-Option)?

I managed to get this code to work for ONE image / option in a Checkbox:

<div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">
    <label  class="frm_primary_label">[field_name]
        <span class="frm_required">[required_label]</span>
    </label>
[input opt=1 label=Option1] <img src=”image1.png" alt="" />
[input opt=2 label=Option2] <img src=”image2.png" alt="" />
[input opt=3 label=Option3] <img src=”image3.png" alt="" />
    [if description]<div class="frm_description">[description]</div>[/if description]
    [if error]<div class="frm_error">[error]</div>[/if error]
</div>

The line 5-7 is what I entered manually ("option" and "image" are different but I decided to make a general example), the lines 1-4 and 8-10 are the default code generated by a Form builder plug-in for the Checkbox-field in question so these can be ignored I think.

Lets say I have 9 images; 3 active - 3 inactive - 3 hovering. For this particular field, I need to insert 6 more images. Also, the Option-text doesn't need to be visible, I only want the images to be seen and clickable (which they are not at this stage). I know how to hide the checkboxes though.

Obviously I have to add or perhaps change the code a bit to get the "ACTIVE/INACTIVE & HOVER behaviour" and I'm not saying I'm even close.

(I know similar stuff has been posted, sorry but each topic appear to have different solutions, so there might be in this case also. It seems I have to delve into the coding matters this time as there are no simple fixes, normally Wordpress & Plug-ins does the job.)

I would appreciate any guiding towards the desired effect I'm trying to achieve.

Thanks.