Image appear while hovering over text

Question

I’m making a site for a pizzeria and need that, when passing the mouse over a pizza menu (text) appear next to a picture of the corresponding pizza.

Answer 1

I made an example using only CSS, I left the code commented for a better understanding, follows below the code and some references:

:Hover

Combinator ~

Display property

/* Defino o tamanho de todas as imagens */
img { 
  width: 50px;
}

/* Oculto a imagem de id igual a "img2" */
#img2 {
    display: none;
}

/* Ao passar o mouse na img1 a img2 será exibida alinhada */
#img1:hover ~ #img2 {
    display: inline;
}

<div>
  <img id="img1" src="https://image.freepik.com/vetores-gratis/fundo-lobo-uivando-na-lua_23-2147645253.jpg" />

  <img id="img2" src="https://image.freepik.com/vetores-gratis/lobo-que-urra-o-fundo_1355-15.jpg" />
</div>

Answer 2

Has N ways to do this, you can use only CSS, or you can use JS.

A simple example to do using jQuery is:

$('ul li span').on('mouseover', function(){
  $(this).next().show()
})

$('ul li span').on('mouseout', function(){
  $(this).next().hide()
})

ul li img{
  display: none;
  width: 50px;
}

ul li span{
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <span>Pizza 1</span>
    <img src="http://www.corpoealma.com/wp-content/uploads/2017/08/pizzabar.jpg">
  </li>
  <li>
    <span>Pizza 2</span>
    <img src="http://bhdicas.com/wp-content/uploads/2017/03/pizza-site-or.jpg">
  </li>
</ul>