Howto Create An Image Slider With Pure CSS3

CSS3 Image Slider

Image slider is a popular effect and often used in portfolio sites and blogs. Most of these sliders are created by Javascript. But with CSS3’s strength, we can implement an image slider with only pure CSS3. This article will guide you to do that.

1. The HTML Markup

The HTML markup for image slider is so simple like this:

<div id="images">
    <img id="image1" src="1.jpg" />
    <img id="image2" src="2.jpg" />
    <img id="image3" src="3.jpg" />
    <img id="image4" src="4.jpg" />
    <img id="image5" src="5.jpg" />
</div>
<div id="slider">
    <a href="#image1">1</a>
    <a href="#image2">2</a>
    <a href="#image3">3</a>
    <a href="#image4">4</a>
    <a href="#image5">5</a>
</div>

We list all images in a div with id="images" and the slide control in a div with id="slider". Each slide control button is an a tag with the target points to corresponding image.

2. Basic CSS

We will style the images and slide control with some basic CSS to make them beautiful:

#images {
    width: 400px;
    height: 250px;
    overflow: hidden;
    position: relative;

    margin: 20px auto;
}
#images img {
    width: 400px;
    height: 250px;

    position: absolute;
    top: 0;
    left: -400px;
}
#images img:first-child {
    left: 0;
}
#slider a {
    text-decoration: none;
    background: #E3F1FA;
    border: 1px solid #C6E4F2;
    padding: 4px 6px;
    color: #222;
}
#slider a:hover {
    background: #C6E4F2;
}

In this code, we specify fixed width and height for both #images element and its images. We also set the position="relative" for #images, and position="absolute" for all images as well as their left and top attribute. This will make all images are put in the same place, they overlay each other.

Notice the negative left attribute. It is used to set the beginning position of images, i.e. out of the #images div. Why do we do that? Because we want images slide from left to right into the #image div box.

But when we launch the script, the #images div box is completely empty. We don’t want that, so we set left:0 for first image to display it in the #images div box.

3. CSS3 Transition For Slider

To slide images with CSS3, we’ll use the transition feature. The CSS3 transition has the following syntax:
transition: transition-property transition-duration transition-timing-function transition-delay;

In our case, we need to slide from left to right, so the transition-property is left, but we will add some effect with opacity for cooler effect, so we use all for transition-property. The transition-timing-function should be linear. The delay and duration can be anything, I choose 1s.
So, the CSS3 for slide effect will be:

#images img {
    z-index: 1;
    opacity: 0;

    transition: all linear 1s;
    -o-transition: all linear 1s;
    -moz-transition: all linear 1s;
    -webkit-transition: all linear 1s;
}
#images img:target {
    left: 0;
    z-index: 9;
    opacity: 1;
}

Here we use the :target pseudo code to target the image when we click on the slide control button. When the image is targeted, we set its left attribute to 0 to make sure the image is displayed inside #images div box.

In this code, there’s one more thing needed to be noticed. That’s the z-index attribute. Because we put all images in the same place, so, when we need to display the targeted image, we should make it overlay others by specifying a higher z-index.

So, the complete CSS for the image slider is:

#images {
    width: 400px;
    height: 250px;
    overflow: hidden;
    position: relative;

    margin: 20px auto;
}
#images img {
    width: 400px;
    height: 250px;

    position: absolute;
    top: 0;
    left: -400px;
    z-index: 1;
    opacity: 0;

    transition: all linear 500ms;
    -o-transition: all linear 500ms;
    -moz-transition: all linear 500ms;
    -webkit-transition: all linear 500ms;
}
#images img:target {
    left: 0;
    z-index: 9;
    opacity: 1;
}
#images img:first-child {
    left: 0;
}
#slider a {
    text-decoration: none;
    background: #E3F1FA;
    border: 1px solid #C6E4F2;
    padding: 4px 6px;
    color: #222;
}
#slider a:hover {
    background: #C6E4F2;
}

You can see the demo here:

One disadvantage of this method that the first image is always displayed as a background. If you really don’t want to have it, there’s a solution: don’t use CSS3 transition for left property (set left:0 for original images), and use CSS3 transition for opacity only.

Create Accordion Menu Using CSS3 Transition

CSS3 Accordion Menu

There are many ways to create an accordion menu, most of them use a javascript library like jQuery to make the effect runs cross browsers. In this tutorial, we’ll see how to make an accordion menu using CSS3 transition. It works on most modern browsers that support CSS3.

HTML Markup

The HTML markup of accordion menu is simple:

<div id="accordion">
    <div class="item">
        <a href="#">Products</a>
        <p>Lorem ipsum nec ex prompta tractatos. Ea elit sale admodum vim, at velit nemore rationibus per. Ullum qualisque dissentias ei qui, in putent doctus cotidieque mei. Mel legere mucius ne, adhuc impetus signiferumque cu eos. Has an zzril soluta impetus. An nisl graece inciderint nec, ea per rebum animal, prodesset accommodare ex eam.</p>
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
</div>

We wrap the accordion menu in a div with id="accordion". Each item of accordion menu is described by a div with class="item". The title of each item is an A tag, and its content – P tag.

Basic CSS

We’ll style our accordion menu to make it look good in most browsers:

#accordion .item {
    width: 400px;
    height: 30px; /* height = total height of A child element */
    overflow: hidden;

    border: 1px solid #ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    margin-bottom: 2px;
}
#accordion a {
    display: block;
    height: 20px;
    line-height: 20px;

    background: #e6e6e6;
    padding: 5px;
    color: #1e1e1e;
    text-decoration: none;
}
#accordion p {
    height: 150px;
    padding: 5px;
}
#accordion div:hover a {
    border-bottom: 1px solid #ccc;
    font-weight: bold;
}

There is one note in this CSS rule: by default, we don’t want to show the content of menu items, so we make it hidden by specify the height of menu item equals to height of its title (including padding) and use CSS property overflow: hidden.

The menu looks like this:

CSS3 Accordion Menu

To make the menu cool, I used CSS3 border-radius rules. It works on most modern browsers (Opera 10.50+, Firefox 3.5+, Safari 3+, Chrome 4+). If the browser doesn’t support CSS3 border-radius, it will degrade gracefully to square corners.

Using CSS3 Transition To Slide Menu Content

It’s time to use CSS3 Transition to show the menu content with accordion effect. Our CSS rule will be applied to each menu item like this:

#accordion .item {
    transition: height ease-in-out 500ms; /* css3 transition */
    -o-transition: height ease-in-out 500ms;
    -moz-transition: height ease-in-out 500ms;
    -webkit-transition: height ease-in-out 500ms;
}
#accordion div:hover {
    height: 180px; /* height = total height of A and P child elements */
}

The CSS3 transition property has the following syntax:

transition: property duration timing delay;
-o-transition: ...;
-moz-transition: ...;
-webkit-transition: ...;

In our example, we need to slide the content of menu item, so the property is height. To make the slide effect, we use ease-in-out as timing. The effect will delay with 500ms.

The CSS3 transition property works with Opera, Safari and Chrome. Firefox will support it in next 3.7 version.

To show the menu content, we need to re-define it’s height. When the content is shown, the height of menu item equals to total height of its A and P children (including padding).

When it’s done, our menu will looks like this when move mouse hover a menu title:

CSS3 Accordion Menu

So, the complete CSS code is:

#accordion .item {
    width: 400px;
    height: 30px; /* height = total height of A child element */
    overflow: hidden;

    transition: height ease-in-out 500ms; /* css3 transition */
    -o-transition: height ease-in-out 500ms;
    -moz-transition: height ease-in-out 500ms;
    -webkit-transition: height ease-in-out 500ms;

    border: 1px solid #ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    margin-bottom: 2px;
}
#accordion a {
    display: block;
    height: 20px;
    line-height: 20px;

    background: #e6e6e6;
    padding: 5px;
    color: #1e1e1e;
    text-decoration: none;
}
#accordion p {
    height: 150px;
    padding: 5px;
}
#accordion div:hover {
    height: 180px; /* height = total height of A and P child elements */
}
#accordion div:hover a {
    border-bottom: 1px solid #ccc;
    font-weight: bold;
}

You can see the code in action in the following demo. I hope this tutorial is helpful for you when decorate your website interface.