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 can menu items be displayed from bottom up using CSS

    Showing a time countdown progress bar

    How to display 'fit' image in CSS or HTML?

    How to apply font anti-alias effects in CSS? [duplicate]

    How can I override inline styles with external CSS?

    CSS Tooltip has different position in different browsers. How can I account for this?

    How to draw realistic smooth slit shadow with Pure CSS3?

    How to implement color through css from dark to light? [closed]

    How to create opacity effect on webOS?

    How to get just one parameter in 'clip' CSS property using JQuery? [duplicate]

    How do you Add an image to the left side of a div

    How can I create Javascript Buttons with Themes?

    How to add scroll to child of flex item?

    how to create an external javascript and an external css file for date picker and how to use it in eclipse

    How to stop text in div pushing other divs down the page?

    Css tool, to calculate how many (in bytes) inline css in html

    How can I make buttons flash different background colors when clicked/

    How to override active admin CSS?

    How to apply padding to a column using and CSS in Firefox?

    How to cancel a too-broad CSS color declaration in a later stylesheet?

    How do I change the last textual node child in JavaScript

    How to call and hide lists using two buttons - using Javascript HTML CSS?

    How to use jQuery to select a class name that's transformed by css-loader?

    How to set backgroundImage property in css file in flex 4?

    How to show the same font which in photoshop on my webpage?

    How to use icon fonts

    CSS: How to have to divs side by side with height 100%?

    How to break up long words but leave out short ones?

    How to make your website works on a projector?

    How To Display only First Word of H2 Heading With JavaScript or CSS