My idea is to create a single div that contains an image, but that this image changes according to the word that is indicated when the mouse pauses for this word. That is to say when you pass the mouse in the word apple appear in the div an apple, to pass over the word pear in that same div appear instead of apple, a pear.
Easy, you put for example in a list the attribute data-img that will be the name of your image file, and with the events mouseenter and mouseleave change according to the li that you are pointing
var target;
$(function(){
$("ul#frutas li").on({
mouseenter: function(){
var el = $(this);
var img = el.attr("data-img");
target = $("#boxImage");
target.find('img').attr("src","https://dummyimage.com/150x150/000/fff&text="+img);
target.show();
},
mouseleave: function(){
target.hide();
target.find("img").removeAttr("src");
}
})
});ul#frutas{
padding: 30px;
margin: 10px;
float: left;
}
ul#frutas li{
padding: 10px;
background: #ccc;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="frutas">
<li data-img='manzana'>Manzana</li>
<li data-img='pera'>Pera</li>
<li data-img='sandia'>Sandía</li>
</ul>
<div style="display: none;width:100%;" id="boxImage">
<img src="">
</div>I made an example with pure js, the first was to create a layer where the words are and assign them a class to instantiate them for that class, then assign a mouseover event to get the < strong> data-fruit which contains the value of the fruit and with that I know what to show:
const palabras = document.getElementsByClassName('palabra');
Array.from(palabras).forEach((elemento) => {
elemento.addEventListener('mouseover', (e) => {
let fruta = elemento.getAttribute("data-fruta");
const img = document.getElementById("img");
switch(fruta) {
case "manzana": var stringImg = '<img src="https://www.comenaranjas.com/images/stories/virtuemart/product/manzana-royal.jpg" width="100" height="100">';break;
case "pera": var stringImg = '<img src="https://super.walmart.com.mx/images/product-images/img_large/00000000004024L.jpg" width="100" height="100">';break;
case "durazno": var stringImg = '<img src="https://arcaikastore.com/494-large_default/mora-organica-x-lb-frutas-organicas.jpg" width="100" height="100">';break;
}
img.innerHTML = stringImg;
});
}); #wrapper{
border:1px solid red;
height:150px;
position:relative;
}
#img{
text-align:center;
}
#palabras{
border:1px solid blue;
bottom:0px;
position:absolute;
text-align:center;
width:100%;
}
#palabras > div{
display:inline-block;
padding-left:5px;
padding-right:5px;
}
#palabras > div:hover{
color: blue;
cursor:pointer;
}<div id="wrapper">
<div id="img"></div>
<div id="palabras">
<div class="palabra" data-fruta="manzana">Manzana</div>
<div class="palabra" data-fruta="pera">Pera</div>
<div class="palabra" data-fruta="durazno">Durazno</div>
</div>
</div>