Show image when mouse over a div - CSS

Question

On the site cited has an effect that when you hover over the link it appears an image.

https://www4.benner.com.br/

 .ul_ajudamos{ margin: 20px 0 0 20px; list-style:none; padding-right: 500px ; } .link_ajudamos{ position: relative; /* Para que a imagem não saia fora do link */ display:block; padding:5px; border:1px #999999 solid; background-color: #CCCCCC; text-decoration:none; color:#FFFFFF; padding-right: 200px; } .link_ajudamos:hover{ background-color:#999999; border-radius: 20px; } .link_ajudamos span{ display:none; /* Aqui você define que todo SPAN que estiver dentro de um A estará invisível */ } .link_ajudamos:hover span{ display:block; /* Aqui você diz que ao passar o mouse sobre o link, colocar um display no span dentro desse link */ position:absolute; /* Para você poder posicionar ao queira, sem quebrar o layour em volta */ top: 0px; /* Para ficar na mesma altura do link */ left: 100%; /* Empurra a imagem para fora do link, ficando ao seu lado */ border:1px #CCCCCC solid; /* Estilo extra, lembrando que você pode colocar qualquer estilo nesse elemento */ }

<ul class="ul_ajudamos">
        <li>
            <a href="#" class="link_ajudamos">+ link1<span><img src="img/img1.jpg"/></span></a>
    
            <li>
                <a href="#" class="link_ajudamos">+ link2<span><img src="img/img2.jpg"/></span></a>
            </li>
    
            <li>
                <a href="#" class="link_ajudamos">+ link3<span><img src="img/img3.jpg"/></span></a>
            </li>
    
            <li>
                <a href="#" class="link_ajudamos">+ link4<span><img src="img/img4.jpg"/></span></a>
            </li>
    
        </li>
    </ul>

I would like to reproduce the same effect, but with the current code I made, the image does not appear in the same place, someone has some example of how to do this?

Answer 1

In fact you want the image that is inside each li appears in a div off menu while hovering the mouse.

With this HTML structure, only with CSS you won’t be able to do this. You have to create a div that will receive the images and put the image 1 in it and change with mouseover using Javascript. You will also have to remove this whole CSS block:

.link_ajudamos:hover span{
   ...
}

Since the question does not show your actual layout, a basic example would be as below. See:

document.addEventListener("DOMContentLoaded", function(){
   
   var links = document.querySelectorAll(".ul_ajudamos li");
   for(let x=0; x < links.length; x++){
      
      links[x].onmouseover = function(){
         
         document.querySelector("#imagem img").src = this.querySelector("img").src;
         
      }
      
   }
   
});

.ul_ajudamos{
   margin: 20px 0 0 20px;
   list-style:none;
   padding-right: 500px;
}

.link_ajudamos{
   position: relative; /* Para que a imagem não saia fora do link */
   display:block;
   padding:5px;
   border:1px #999999 solid;
   background-color: #CCCCCC;
   text-decoration:none;
   color:#FFFFFF;
   padding-right: 200px;
}

.link_ajudamos:hover{
   background-color:#999999; border-radius: 20px;
}

.link_ajudamos span{
   display:none; /* Aqui você define que todo SPAN que estiver dentro de um A estará invisível */
}

#imagem{
   width: 100px;
   height: 100px;
   border: 1px solid #ddd;
}

#imagem img{
   width: 100%;
   height: 100%;
}

<div id="imagem"><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"/></div>
<ul class="ul_ajudamos">
   <li>
      <a href="#" class="link_ajudamos">+ link1<span><img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"/></span></a>
   </li>
   <li>
      <a href="#" class="link_ajudamos">+ link2<span><img src="https://onlinejpgtools.com/images/examples-onlinejpgtools/coffee.jpg"/></span></a>
   </li>
   <li>
      <a href="#" class="link_ajudamos">+ link3<span><img src="https://static1.squarespace.com/static/534af30be4b0589a6dce3444/t/5384c47fe4b0cfdce9f468db/1401210076669/thCAQN1GI0.jpg"/></span></a>
   </li>
   <li>
      <a href="#" class="link_ajudamos">+ link4<span><img src="https://baixaki.com.br/imagens/2013/10/30/30152755351-t100.jpg"/></span></a>
   </li>
</ul>