How to put images behind each other in css


Tags: jquery,html,css

Problem :

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:

<header>
    <span><i class="fa fa-phone" aria-hidden="true"></i> Cell Phone</span>
    <span><i class="fa fa-envelope-o" aria-hidden="true"></i> WEBSITE</span>          
</header>           
<!------------Navigation area--------------------------->
<div class="logo">
    <img src="" alt="Image">
</div>
<nav>
    <ul class="topnav">
        <li class="icon">
            <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
        </li>
        <li class="active"><a href="#">HOME</a></li>
        <li><a href="#"> ABOUT</a></li>
        <li><a href="#">CONSULTING SERVICES</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</nav>         
<!------------Slide Section---------------------------->              
<section id="slider">
    <img src="image/291H.jpg" alt="Important Images">
    <img src="image/305H.jpg" alt="PIGS">
    <img src="image/251H.jpg" alt="ROADS will be here">
</section>

And the css code for the slider section and the image is as it goes:

img{
    width:100%;
}
#slider{
    width: 100%;
    overflow:hidden;
}

How can I solve this problem and remain the responsiveness?



Solution :

As you have them in the same container (#slider) you can display them as position: absolute and they will be positioned on the top-left corner of its container.

I have created an example in which they dissapear when you click on them. Now you will have to hide/display them as your slider needed with JQuery.

$('img').each(function() {
     $(this).click(function() {
     		$(this).hide();
     });
});
img{
    position: absolute;
    width:100%;
}
#slider{
    width: 100%;
    overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
    <span><i class="fa fa-phone" aria-hidden="true"></i> Cell Phone</span>
    <span><i class="fa fa-envelope-o" aria-hidden="true"></i> WEBSITE</span>          
</header>           
<!------------Navigation area--------------------------->
<div class="logo">
    <img src="" alt="Image">
</div>
<nav>
    <ul class="topnav">
        <li class="icon">
            <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
        </li>
        <li class="active"><a href="#">HOME</a></li>
        <li><a href="#"> ABOUT</a></li>
        <li><a href="#">CONSULTING SERVICES</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</nav>         
<!------------Slide Section---------------------------->              
<section id="slider">
    <img src="http://www.hdbloggers.net/wp-content/uploads/2016/01/Background.png" alt="Important Images">
    <img src="http://www.planwallpaper.com/static/images/6935544-blue-backgrounds-hd.jpg" alt="PIGS">
    <img src="http://watermarked.cutcaster.com/cutcaster-photo-100482846-Blue-Technology-Background.jpg" alt="ROADS will be here">
</section>


    CSS Howto..

    How to format currency as you type using jQuery

    How do you tell which css class to modify?[Example inside]

    how to apply conditional stylesheet $this->headLink()->appendStylesheet('css/css.css') with zend-framework

    How to have two sub-divs the same height as each other

    How php execute in file with extension .ctp in cakephp?

    how to add css for div tag

    How do I make my div scale to larger than it's original size using css animation?

    How can one fix a CSS3 graident background when using a box for content?

    How to make width of nested CSS elements all the same?

    How to define specific CSS rules for IE9 alone?

    how to make the parent width equals the width of all element inside it?

    How to add a mobile optimised external CSS to a Shopify site

    Pure CSS3 show/hide full height div with transition

    Resolved - CSS of Blank Theme Does NOT Show My Edits - Why?

    How to make text box to overlap with the image?

    How to remove an elements active state when a sub element is clicked

    How to make simple_form input field wider with CSS?

    Angular 2 Materialize CSS Side-Nav Not Showing

    How to scroll to bottom of div generated by ng-repeat Angular JS using JQuery?

    How to get CSS background images to show up in HTML files opened by Word?

    How do I adjust triangle in css price tag to the right size

    Javafx CSS How to inherit background color from other css settings

    How can I separate a column on a web page depending on whether or not the browser is mobile?

    How do I properly use display:block on this menu?

    How to Generate All Possible CSS 2 Selector Combinations?

    Show overlay fullscreen div then hide it by clicking on it

    jquery hide and show for printing

    How to localize the CSS just for this table's use?

    How to make semi-transparent background [duplicate]

    How can I use the HTML data attribute in CSS as a property? [duplicate]