I have a budget system but as there are many items with similar description came the need to visualize the image next to the description, the link of the image and the description will be dynamic and will come from a database, I made a code to exemplify the need, but this only works in firefox, remembering I did just 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><labelfor="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>