title: how to hide an image gallery to show just one picture
body: <p>Hi I don´t know how to this, I have two sections, in the first one I have some images, the other have a list. I need that when I make a hover on the list :
  "li:hover" the images on the other section be hide to show another picture.
  My code is this: ` </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;prueba&lt;/title&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jque‌​ry.min.js"&gt;&lt;/script&gt;
  &lt;style&gt;section.names {
    float: right;
    width: 60%;
    height: 400px;
  }
  
  li a:hover&gt;img {
    display: initial;
    float: right;
    width: 50%;
    margin-right: 2%;
  }
  
  .hide {
    display: none;
  }
  
  section.gallery {
    width: 39%;
    float: left;
    height: 85%;
  }&lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;script&gt;$('.item').hover( function() {
    $('.gallery &gt; img').hide();
    $('.gallery &gt; #' + $(this).attr('data-img')).show();
  });
  
  $( ".names" ).mouseout(function() {
     $('.gallery &gt; img').show();
  });
  &lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div&gt;
    &lt;section class="gallery"&gt;
      &lt;img id="img1" src="lizard.jpg" alt="Smiley face 01" height="100%" width="100%"&gt;
      &lt;img id="img2" src="lizard.jpg" alt="Smiley face 02" height="100" width="200"&gt;
      &lt;img id="img3" src="lizard.jpg" alt="Smiley face 03" height="45px" width="150px"&gt;
    &lt;/section&gt;
  
    &lt;section class="names"&gt;
      &lt;ol&gt;
        &lt;li class="item" data-img="img1"&gt;&lt;a href="project.html"&gt;Esplai,silkscreen and editorial production&lt;/a&gt;&lt;/li&gt;
        &lt;li class="item" data-img="img2"&gt;&lt;a href="project.html"&gt;Esplai,silkscreen and editorial production&lt;/a&gt;&lt;/li&gt;
        &lt;li class="item" data-img="img3"&gt;&lt;a href="project.html"&gt;Esplai,silkscreen and editorial production&lt;/a&gt;&lt;/li&gt;
      &lt;/ol&gt;
  
    &lt;/section&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Actually the image appears on the right but I need yo show up on the left, and the other hide.
  Thanks</p>