Is product image in <option> of <select> possible?

Question

I have a budget system but as there are many items with similar description arose the need to view the image together with the description, the image link and the description will be dynamic and will come from a database, I made a code to exemplify the need, but this works only in firefox, remembering I did only to exemplify.

$(document).ready(function(){
    $('#img_1').mouseenter(function(){
       $('#image_1').show();
    });
    $('#img_1').mouseout(function(){
       $('#image_1').hide();
    });
    $('#img_2').mouseenter(function(){
       $('#image_2').show();
    });
    $('#img_2').mouseout(function(){
       $('#image_2').hide();
    });
    $('#img_3').mouseenter(function(){
       $('#image_3').show();
    });
    $('#img_3').mouseout(function(){
       $('#image_3').hide();
    });
})

img{
    max-width: 80px;
    max-height: 80px;
    border: 1px solid rgba(230, 76, 16, 0.5);
    background-color: rgba(230, 76, 16, 0.2);
    box-shadow: 1px 1px 2px orange;
    border-radius: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label for="img">Selecione um ítem: </label>
  <select name="imgs" id="imgs">
                <option value="img_1" id="img_1">Img 1</option>
                <option value="img_2" id="img_2">Img 2</option>
                <option value="img_3" id="img_3">Img 3</option>
            </select>
  <figure>
    <img style="display: none;" src="http://lorempixel.com/100/100/technics/" alt="Imagem 1" id="image_1">
    <img style="display: none;" src="http://lorempixel.com/100/100/technics/" alt="Imagem 2" id="image_2">
    <img style="display: none;" src="http://lorempixel.com/100/100/technics/" alt="Imagem 3" id="image_3">
  </figure>
</div>

Answer 1

Within the option only text is allowed. MDN documentation:

Permitted Content: Text, possibly with escaped characters (such as é).

With jQuery an option is the selectMenu.