Pure CSS3 content slider

My friend Francesca has recently started her web site which features a nice content slider on the home page. I decided to create a similar slider using jQuery, but I soon realized that the main effect could be actually achieved using only CSS3 transitions. Let's see how.

First, our markup:

<div id="slideshow">
 <div class="slide s1">
  <img src="img/1.jpg" alt="" />
  <div class="caption">1. Lorem ipsum dolor sit amet</div>
 </div>
 <div class="slide s2">
  <img src="img/2.jpg" alt="" />
  <div class="caption">2. Lorem ipsum dolor sit amet</div>
 </div>
 <div class="slide s3">
  <img src="img/3.jpg" alt="" />
  <div class="caption">3. Lorem ipsum dolor sit amet</div>
 </div>
 <div class="slide s4">
  <img src="img/4.jpg" alt="" />
  <div class="caption">4. Lorem ipsum dolor sit amet</div>
 </div>
</div>

Each slide has a different left offset within the main container, so we'll use contextual positioning. We also need to register our transition on each slide:

#slideshow {
 width: 500px;
 height: 330px;
 margin: 2em auto;
 overflow: hidden;
 position: relative;
 background: #ccc;
 border: 1px solid #000;
}

#slideshow div.slide {
 width: 500px;
 height: 330px;
 position: absolute;
 top: 0;
 cursor: pointer;
 z-index: 1;
 -moz-transition: all 1s ease-out;
 -webkit-transition: all 1s ease-out;
 -o-transition: all 1s ease-out;
 -ms-transition: all 1s ease-out;
 transition: all 1s ease-out;
}

#slideshow div.slide img {
 position: absolute;
 top: 0;
 left: 0;
 width: 500px;
 height: 330px;
}

#slideshow div.slide div.caption {
 height: 2em;
 width: 100%;
 position: absolute;
 bottom: 0;
 left: 0;
 background: rgba(0, 0, 0, 0.5);
 color: #fff;
 line-height: 2;
 text-indent: 0.5em;
}

#slideshow div.s1 {
 left: 100px;
}
#slideshow div.s2 {
 left: 200px;
}
#slideshow div.s3 {
 left: 300px;
}
#slideshow div.s4 {
 left: 400px;
}

On :hover, we only have to change the left and z-index property on each slide. Here is where the magic of CSS3 transitions takes place:

#slideshow div.slide:hover {
 left: 0;
 z-index: 2;
}

You can see the demo below.

Demo

Live demo

Download

ZIP file

2 thoughts on “Pure CSS3 content slider”

  1. Can we try to fade the other images off when the hovered image slides on? It'll be better than images disappearing abruptly. Else your work is great!

Leave a Reply

Note: Only a member of this blog may post a comment.