title: CSS - How to hide extra images
body: <p>I am having a div which holds 3 big images of 720x360px they all are visible to the users but what i want is to show only 1 image at a time.</p>
  
  <p>My html code:</p>
  
  <pre><code>&lt;div class="main-slider"&gt;
  
          &lt;div class="slider-large-image"&gt;
              &lt;img src="images/floor_guide.png" alt="" width="727px" height="360px" /&gt;
              &lt;img src="images/ice_planet.jpg" alt="" width="727px" height="360px" /&gt;
              &lt;img src="images/buddy_work.jpg" alt="" width="727px" height="360px" /&gt;
          &lt;/div&gt;
  
          &lt;div class="slider-sidebar"&gt;
              &lt;img class="image1" src="images/floor_guide.png" alt="" width="240px" height="180px" /&gt;
              &lt;img class="image2"  src="images/ice_planet.jpg" alt="" width="240px" height="180px" /&gt;
              &lt;img class="image3"  src="images/buddy_work.jpg" alt="" width="240px" height="180px" /&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>My CSS code:</p>
  
  <pre><code>.main-slider{
      height:360px;
      width:1281px;
  }
  
  .slider-large-image{
      width:720px;
      display:inline-block;
      white-space:nowrap;
  }
  
  .slider-large-image img{
      display:inline-block;
  }
  </code></pre>
  
  <p>You can see the output here : <a href="http://jsfiddle.net/mareebsiddiqui/dPAnr/" rel="nofollow">http://jsfiddle.net/mareebsiddiqui/dPAnr/</a></p>