title: How to put images behind each other in css
body: <p>In this layout I have 3 responsive images that are displayed one after each other. But as I am trying to create an image slider, ideally I want only one image to appear and the rest would be hidden behind that image.
  There goes my html:</p>
  
  <pre><code>&lt;header&gt;
      &lt;span&gt;&lt;i class="fa fa-phone" aria-hidden="true"&gt;&lt;/i&gt; Cell Phone&lt;/span&gt;
      &lt;span&gt;&lt;i class="fa fa-envelope-o" aria-hidden="true"&gt;&lt;/i&gt; WEBSITE&lt;/span&gt;          
  &lt;/header&gt;           
  &lt;!------------Navigation area---------------------------&gt;
  &lt;div class="logo"&gt;
      &lt;img src="" alt="Image"&gt;
  &lt;/div&gt;
  &lt;nav&gt;
      &lt;ul class="topnav"&gt;
          &lt;li class="icon"&gt;
              &lt;a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()"&gt;☰&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt; ABOUT&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;CONSULTING SERVICES&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;         
  &lt;!------------Slide Section----------------------------&gt;              
  &lt;section id="slider"&gt;
      &lt;img src="image/291H.jpg" alt="Important Images"&gt;
      &lt;img src="image/305H.jpg" alt="PIGS"&gt;
      &lt;img src="image/251H.jpg" alt="ROADS will be here"&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>And the css code for the slider section and the image is as it goes:</p>
  
  <pre><code>img{
      width:100%;
  }
  #slider{
      width: 100%;
      overflow:hidden;
  }
  </code></pre>
  
  <p>How can I solve this problem and remain the responsiveness?      </p>