Okay, give this a try...

This requires some Javascript to rearrange the images, but it works in my own testing.

I took the 5 icons from your original post, and split them into 5 separate image files, and then also made 5 grayscale versions.

Those 10 images, I put into a folder that I named voting, that I placed inside the img folder, so the path is as follows:
C:\Program Files\Laserfiche\Laserfiche Forms\Forms\img\voting
http://servername/forms/img/voting

I named the 10 images vote1-color.jpg, vote2-color.jpg, etc. and vote1-gray.jpg, vote2-gray.jpg, etc.  Those 10 image files are attached.

Add your radio button(s) to the form.  They need to have CSS Class Name of: votingRadioButton - and they need the following HTML for the "Choices" (the values of the choices you can set to whatever you need).  EDIT: The Javascript below assumes the values are option1, option2, option3, option4, and option5 - if you want or need to list different values, you will need to edit lines 28, 32, 36, 40, and 44 to check for the values you utilize instead.

<span class="option1"></span>
<span class="option2"></span>
<span class="option3"></span>
<span class="option4"></span>
<span class="option5"></span>

It should look something like this:

Then add this Javascript to your form:

$(document).ready(function () {
  
  //Update all radio buttons with the votingRadioButton class.
  //Update the images and text based on whether each option is selected or not.
  updateRadioButtons();
  $('.votingRadioButton').change(updateRadioButtons);
  function updateRadioButtons()
  {
    $('.votingRadioButton').each(function() {
      var checkedValue = $(this).find(':checked').val();
      if(checkedValue == undefined)
      {
        $(this).find('input').hide();
        $(this).find('.option1').html('<div style="width:70px; display:inline-block; text-align: center;"><img align="middle"><img src="http://SERVERNAME/forms/img/voting/vote1-color.jpg" style="width:50px;"><br>LOVE</div>');
        $(this).find('.option2').html('<div style="width:70px; display:inline-block; text-align: center;"><img align="middle"><img src="http://SERVERNAME/forms/img/voting/vote2-color.jpg" style="width:50px;"><br>LIKE</div>');
        $(this).find('.option3').html('<div style="width:70px; display:inline-block; text-align: center;"><img align="middle"><img src="http://SERVERNAME/forms/img/voting/vote3-color.jpg" style="width:50px;"><br>UNSURE</div>');
        $(this).find('.option4').html('<div style="width:70px; display:inline-block; text-align: center;"><img align="middle"><img src="http://SERVERNAME/forms/img/voting/vote4-color.jpg" style="width:50px;"><br>DISLIKE</div>');
        $(this).find('.option5').html('<div style="width:70px; display:inline-block; text-align: center;"><img align="middle"><img src="http://SERVERNAME/forms/img/voting/vote5-color.jpg" style="width:50px;"><br>HATE</div>');
      }
      else
      {
        $(this).find('input').hide();
        $(this).find('.option1').html('<div style="width:70px; display:inline-block; text-align: center;"><img align="middle"><img src="http://SERVERNAME/forms/img/voting/vote1-gray.jpg" style="width:50px;"><br></div>');
        $(this).find('.option2').html('<div style="width:70px; display:inline-block; text-align: center;"><img align="middle"><img src="http://SERVERNAME/forms/img/voting/vote2-gray.jpg" style="width:50px;"><br></div>');
        $(this).find('.option3').html('<div style="width:70px; display:inline-block; text-align: center;"><img align="middle"><img src="http://SERVERNAME/forms/img/voting/vote3-gray.jpg" style="width:50px;"><br></div>');
        $(this).find('.option4').html('<div style="width:70px; display:inline-block; text-align: center;"><img align="middle"><img src="http://SERVERNAME/forms/img/voting/vote4-gray.jpg" style="width:50px;"><br></div>');
        $(this).find('.option5').html('<div style="width:70px; display:inline-block; text-align: center;"><img align="middle"><img src="http://SERVERNAME/forms/img/voting/vote5-gray.jpg" style="width:50px;"><br></div>');
        if(checkedValue == 'option1')
        {
          $(this).find('.option1').html('<div style="width:70px; display:inline-block; text-align: center;"><img align="middle"><img src="http://SERVERNAME/forms/img/voting/vote1-color.jpg" style="width:50px;"><br>LOVE</div>');
        }
        else if(checkedValue == 'option2')
        {
          $(this).find('.option2').html('<div style="width:70px; display:inline-block; text-align: center;"><img align="middle"><img src="http://SERVERNAME/forms/img/voting/vote2-color.jpg" style="width:50px;"><br>LIKE</div>');
        }
        else if(checkedValue == 'option3')
        {
          $(this).find('.option3').html('<div style="width:70px; display:inline-block; text-align: center;"><img align="middle"><img src="http://SERVERNAME/forms/img/voting/vote3-color.jpg" style="width:50px;"><br>UNSURE</div>');
        }
        else if(checkedValue == 'option4')
        {
          $(this).find('.option4').html('<div style="width:70px; display:inline-block; text-align: center;"><img align="middle"><img src="http://SERVERNAME/forms/img/voting/vote4-color.jpg" style="width:50px;"><br>DISLIKE</div>');
        }
        else if(checkedValue == 'option5')
        {
          $(this).find('.option5').html('<div style="width:70px; display:inline-block; text-align: center;"><img align="middle"><img src="http://SERVERNAME/forms/img/voting/vote5-color.jpg" style="width:50px;"><br>HATE</div>');
        }
      }
    });
  }
  
});

What this Javascript is doing, is that when the form is first loaded, or any time that any radio button that has the votingRadioButton class is changed, it'll reload the appearance of the radio button.  First it hides the actual radio button input, and then it checks if radio button is selected.  If none are selected, the five color images are loaded along with the text below them.  But if one is selected, then it will load the five gray images without text, and then replace just the one selected with the color image and text.

The end result looks like this: