How to Create a Stylish Image Content Slider in Pure CSS3

How to Create a Stylish Image Content Slider in Pure CSS3 [Tutorial]

Topic: CSS3
Difficulty: Intermediate
Estimated completion time: 45 mins

In this tutorial we will create a CSS3 only image slider inspired on the Futurico User Interface by Vladimir Kudinov. The CSS3 features that we’ll be using in this tutorial are in tests in the most recent browsers so this slider will not work in all browsers (try preview in Chrome and Safari). I don’t recommend you to use it on your professional projects as this will not work properly, use this tutorial just to play around with the last CSS3 features that you will be able to use in the feature.

Step 1 – HTML

We’ll create two unordered lists, one for thumbnails and one for the images. To link the thumbnail to the respective image we will add an id for each image.

<div class="slider-wrapper">
<ul class="s-thumbs">
	<li><a href="#slide-1"><img src="img/thumb1.png" alt="" /></a></li>
	<li><a href="#slide-2"><img src="img/thumb2.png" alt="" /></a></li>
	<li><a href="#slide-3"><img src="img/thumb3.png" alt="" /></a></li>
	<li><a href="#slide-4"><img src="img/thumb4.png" alt="" /></a></li>
	<li><a href="#slide-5"><img src="img/thumb5.png" alt="" /></a></li>
	<li><a href="#slide-6"><img src="img/thumb6.png" alt="" /></a></li>
	<li><a href="#slide-7"><img src="img/thumb7.png" alt="" /></a></li>
</ul>
<ul class="s-slides">
	<li id="slide-1"><img src="img/slide1.png" alt="" /></li>
	<li id="slide-2"><img src="img/slide2.png" alt="" /></li>
	<li id="slide-3"><img src="img/slide3.png" alt="" /></li>
	<li id="slide-4"><img src="img/slide4.png" alt="" /></li>
	<li id="slide-5"><img src="img/slide5.png" alt="" /></li>
	<li id="slide-6"><img src="img/slide6.png" alt="" /></li>
	<li id="slide-7"><img src="img/slide7.png" alt="" /></li>
</ul>
</div>

Step 2 – Basic CSS Styling

In this step we’ll create the basic layout of our slider. To do that we will reset the margin and padding of all the slider elements, give them a fixed width / height and position them.

.slider-wrapper ul,
.slider-wrapper li,
.slider-wrapper div,
.slider-wrapper img,
.slider-wrapper a {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	list-style: none;
}

.slider-wrapper {
	width: 508px;
	overflow: hidden;
}

ul.s-thumbs li {
	float: left;
}

ul.s-slides,
ul.s-slides li,
ul.s-slides a,
ul.s-slides img {
	width: 500px;
	height: 350px;
	position: relative;
}

ul.s-slides {
	overflow: hidden;
	clear: both;
}

ul.s-slides li {
	position: absolute;
	z-index: 50;
}

Step 2

Step 3 – CSS3 Styling

Now we will add the CSS3 Styles to make it look nicer. Here we will use some CSS3 properties like shadows, rounded corners, etc. You will notice that we will use various prefixes for each browser. This is required because these properties are in tests in some browsers and we need to add prefixes to target them.

Are you looking for WordPress Theme?

Get Startup Framework for WordPress now!

ul.s-thumbs li {
	float: left;
	margin-bottom: 10px;
	margin-right: 11px;
}

ul.s-thumbs li:last-child {
	margin-left: 1px;
	margin-right: 0;
}

ul.s-thumbs a {
	display: block;
	position: relative;
	width: 55px;
	height: 55px;
	border: 4px solid transparent;

	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;

	font: bold 12px/25px Arial, sans-serif;
	color: #515151;
	text-decoration: none;
	text-shadow: 1px 1px 0px rgba(255,255,255,.25), inset 1px 1px 0px rgba(0,0,0,.15);
}

ul.s-thumbs img {
	-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
	-moz-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
	box-shadow: 1px 1px 5px rgba(0,0,0,.5);
}

ul.s-thumbs a:hover,
ul.s-slides {
	border: 4px solid #141517;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

	-webkit-box-shadow: 0px 1px 0px rgba(255,255,255,.05);
	-moz-box-shadow: 0px 1px 0px rgba(255,255,255,.05);
	box-shadow: 0px 1px 0px rgba(255,255,255,.05);
}

Step 3

Step 4 – Image Description

In this step we will add an image description box to appear when hover over the image. We’ll create this using some CSS3 styles and the :before selector to add the arrow to the box.

HTML

To create the box add a span tag with some text to the anchor tag.

<ul class="s-thumbs">
	<li><a href="#slide-1"><img src="img/thumb1.png" alt="" /><span>Image 1</span></a></li>
	<li><a href="#slide-2"><img src="img/thumb2.png" alt="" /><span>Image 2</span></a></li>
	<li><a href="#slide-3"><img src="img/thumb3.png" alt="" /><span>Image 3</span></a></li>
	<li><a href="#slide-4"><img src="img/thumb4.png" alt="" /><span>Image 4</span></a></li>
	<li><a href="#slide-5"><img src="img/thumb5.png" alt="" /><span>Image 5</span></a></li>
	<li><a href="#slide-6"><img src="img/thumb6.png" alt="" /><span>Image 6</span></a></li>
	<li><a href="#slide-7"><img src="img/thumb7.png" alt="" /><span>Image 7</span></a></li>
</ul>

CSS

To create the box we will add a fixed width to be able to center the box on the image and will and some shadows and gradients to make it look better. To create the arrow with only CSS we will use a border trick.

ul.s-thumbs li a:hover span {
	position: absolute;
	z-index: 101;
	bottom: -30px;
	left: -22px;
	display: block;
	width: 100px;
	height: 25px;
	text-align: center;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

	-webkit-box-shadow: 0px 1px 0px rgba(0,0,0,.4);
	-moz-box-shadow: 0px 1px 0px rgba(0,0,0,.4);
	box-shadow: 0px 1px 0px rgba(0,0,0,.4);

	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;

	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #bcbcbc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#bcbcbc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* IE10+ */
	background: linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* W3C */
}

ul.s-thumbs li a:hover span:before {
	width: 0;
	height: 0;
	border-bottom: 5px solid #ffffff;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	content: '';
	position: absolute;
	top: -5px;
	left: 44px;
}

ul.s-thumbs li:first-child a:hover span {
	left: -3px;
}

ul.s-thumbs li:first-child a:hover span:before {
	left: 25px;
}

ul.s-thumbs li:last-child a:hover span {
	left: auto;
	right: -3px;
}

ul.s-thumbs li:last-child a:hover span:before {
	left: auto;
	right: 26px;
}

Step 4

Step 5 – Slider Transitions

Now we’ll start creating the slider transitions. As we’ll create a different transition to each image we need to add a different class name to the images.

HTML

<ul class="s-slides">
	<li id="slide-1" class="slideLeft"><img src="img/slide1.png" alt="" /></li>
	<li id="slide-2" class="slideRight"><img src="img/slide2.png" alt="" /></li>
	<li id="slide-3" class="slideTop"><img src="img/slide3.png" alt="" /></li>
	<li id="slide-4" class="slideBottom"><img src="img/slide4.png" alt="" /></li>
	<li id="slide-5" class="zoomIn"><img src="img/slide5.png" alt="" /></li>
	<li id="slide-6" class="zoomOut"><img src="img/slide6.png" alt="" /></li>
	<li id="slide-7" class="rotate"><img src="img/slide7.png" alt="" /></li>
</ul>

CSS

To create the transitions we will use @keyframes. The animation is created by gradually changing from one set of CSS styles to another. To specify when the animation will start, change and finish we’ll use percentages, 0% is the beginning of the animation and 100% is when the animation is complete. Let’s start creating this animations..

Slide from left

At the beginning of the animation the image will be positioned negative 500px left and when the animation completes the image will be positioned 0px left. By setting the animation duration to 1 second we will get a slide effect from left to the right.

/* Slide Left */

@-webkit-keyframes 'slideLeft' {
	0% { left: -500px; }
	100% { left: 0; }
}

ul.s-slides li.slideLeft:target {
	z-index: 100;

	-webkit-animation-name: slideLeft;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}

Slide From Right

/* Slide Right */

@-webkit-keyframes 'slideRight' {
	0% { left: 500px; }
	100% { left: 0; }
}

ul.s-slides li.slideRight:target {
	z-index: 100;

	-webkit-animation-name: slideRight;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}

Slide From Top

/* Slide Top */

@-webkit-keyframes 'slideTop' {
	0% { top: -350px; }
	100% { top: 0; }
}

ul.s-slides li.slideTop:target {
	z-index: 100;

	-webkit-animation-name: slideTop;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}

Slide From Bottom

/* Slide Bottom */

@-webkit-keyframes 'slideBottom' {
	0% { top: 350px; }
	100% { top: 0; }
}

ul.s-slides li.slideBottom:target {
	z-index: 100;

	-webkit-animation-name: slideBottom;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}

Zoom Image From Inside

To make the zoom transition we will use the CSS3 transform property. At the beginning of the animation the image size will be 10% and when the animation completes it will have the original image size. We’ll position it 4px from the top to fix a space that appears at the bottom.

/* Zoom In */

@-webkit-keyframes 'zoomIn' {
	0% { -webkit-transform: scale(0.1); }
	100% { -webkit-transform: none; }
}

ul.s-slides li.zoomIn:target {
	z-index: 100;
	top: 4px;

	-webkit-animation-name: zoomIn;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}

Zoom Image From Outside

/* Zoom Out */

@-webkit-keyframes 'zoomOut' {
	0% { -webkit-transform: scale(2); }
	100% { -webkit-transform: none; }
}

ul.s-slides li.zoomOut:target {
	z-index: 100;

	-webkit-animation-name: zoomOut;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}

Rotate and Zoom the Image

/* Rotate */

@-webkit-keyframes 'rotate' {
	0% { -webkit-transform: rotate(-360deg) scale(0.1); }
	100% { -webkit-transform: none; }
}

ul.s-slides li.rotate:target {
	z-index: 100;
	top: 4px;

	-webkit-animation-name: rotate;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}

Step 6 – “Not Target” Image

As we are using z-index to set what image to appear on the top we are getting a bug when we click to show a new image. When you click in a new thumbnail the previous active slide disappears and it shows the last slide during the new slide transition. To fix that we need to add a not-target style with a higher z-index during the new slide transition.

/* Not Target */

@-webkit-keyframes 'notTarget' {
	0% { z-index: 75; }
	100% { z-index: 75; }
}

ul.s-slides li:not(:target) {
	-webkit-animation-name: notTarget;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: 1;
}

Step 7 – First Visible Slider

When the slider is load it will show the last slider image. To be able to choose the first visible slider image we’ll create a class with a higher z-index and you will only need to add this class to the slider you want to be visible when the slider loads.

/* First Slide */

ul.s-slides li.first {
	z-index: 60;
}

Step 8 – Slider Load

In this step we will add a load fade in animation to the slider because when it will load with the page it will wait 1 second to change to the first slide. We don’t want to see this transition and we will hide it for 1 second and then we will fade in.

/* Slider Load */

@-webkit-keyframes 'load' {
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}

.slider-wrapper {
	-webkit-animation-name: load;
	-webkit-animation-duration: 2s;
	-webkit-transition-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
}

Conclusion

Congratulations, you have finished this tutorial! As we have used a lot of CSS3 features that are only supported by the last versions of the browsers this slider is not a good to use on your professional projects yet. I’ve made this just to show you a sneak peek of what we will could do in the feature just with CSS3. Hope you like it and don’t forget to live some feedback or any question you have in the comments.

Preview

Subscribe to Unlock

Subscribe to our newsletter to get access to this content. Your email will not be sold/rented. Unsubscribe at any time.
- required fields

Enter the e-mail, which was subscribed

After that, the content becomes available again!
- fields are mandatory

On your email was sent a letter

Simply click on the link in the email and you will get access to the hidden content!

There is no information about this email in our database. Please subscribe by clicking on button below.

Your e-mail is not in our database. Subscribe by clicking the button below
I'm already a subscriber

Futurico PRO

Valeriu is a Web Designer & Front-End Developer currently living in Lisbon, Portugal. He creates some cool stuff using CSS3 and HTML5. You can follow him on @vtimbuc, Google+ or visit his web site at vtimbuc.net.

Newsletter

24 Comments
  1. Felipe Ranieri Feb 7, 10:26 pm

    Hi Valeriu.

    First, congratulations for this tutorial.
    It’s very complete.

    Can I publish in my blog a Portuguese version of your text and examples? With credits of course!

    See ya.

    Reply
    +1
    • Adrian Feb 7, 10:48 pm

      Hi, you can translate this tutorial:

      1. Mention site source
      2. Mention text in author box
      3. Preview and download buttons with links to designmodo preview and download buttons

      Reply
      +2
  2. Naïa Feb 8, 9:21 am

    I don’t know anything about javascript and jquery (except using scripts of other people – with credits of course ;)). I’m really hopping CSS3 will be able to replace it for this kind of use. This tutorial will help me to train ! We just have to wait for navigator to use those possibilities.

    Reply
    +1
  3. Valeriu Feb 8, 11:10 am

    Can you be more specific, what type of error do you get?

    Reply
    0
  4. Rachael Feb 8, 12:09 pm

    Great tutorial here, very simply done – hopefully as browsers keep updating themselves more tutorials like this will become popular. Animations work beautifully in webkit, which still works effectively in Firefox without any transitions. I’m going to have a play with this and see what I can achieve with it and maybe add a few tweaks.

    I don’t get any errors in your code, just when validating your css3, which of course is to be expected when using vendor specific tags, I always think these should show as warnings rather than errors/or check your have a backup for each browser instead of being an error.

    I also have to compliment you on your choice of images, as up is probably one of my favourite movies of all time!

    Reply
    0
  5. Akash Feb 8, 2:19 pm

    Simple but sweet…. Loved ! ! ! !

    I loved the border transition most

    Reply
    -2
  6. Julien G Feb 9, 4:30 pm

    Good job !

    But why do you use only WebKit prefix ?

    I think you can add at least unprefixed CSS3 declarations.

    Reply
    +2
    • Valeriu Feb 9, 10:15 pm

      Hi, I’ve tested it with prefixes for all browsers but it only worked with webkit so to keep the code simple I just only used the webkit prefix.

      Reply
      0
  7. Hammad Baig Feb 9, 9:27 pm

    Awesome slider i really like this tutorial thanks for sharing

    Reply
    +1
  8. Kreativ Theme Feb 14, 3:14 pm

    Hi Valeriu … you are really talented web developer … this is something I was looking for my wordpress theme …

    Thanks a lot!

    Reply
    0
    • Valeriu Feb 14, 5:24 pm

      Thanks Kreativ Themes.

      I don’t recommend you to use it now because it will not work properly in all browsers as the used CSS3 features are not implemented yet. If you like it you can add some jQuery to make it work properly for all of your visitors.

      Reply
      +1
      • Paal Joachim Romdahl Mar 26, 7:19 am

        Hi

        I have just quickly browsed through and look forward to following along your tutorial! It looks really nice!

        I noticed in the comments that this only works for Web Kit browsers. Could you add on to the tutorial (a part 2 or similar) so that it works for all browsers?

        Part 3 could be on creating this slider to work in WordPress.
        Hopefully you’ll be able to do these things since these are very very interesting tutorials!!

        Reply
        +1
        • Valeriu May 16, 2:24 pm

          Run it to prefixer.com to and when the other browser will support @keyframes it will work.

          Reply
          0
  9. Jess Feb 17, 10:41 am

    Is there a way to keep the page from jumping to the top of the slide ID? If you use it on a page with any length, it drops the screen to the top of the slide.

    Reply
    0
  10. Taz Feb 17, 10:57 pm

    Hi, it is a great job indeed but how can i maintain the original size of my pics?

    Reply
    0
  11. Prodyot Feb 18, 8:19 pm

    Wow!
    Great tutorial.
    Excellent job.
    This is a very useful utility.
    Thanks for the tutorial and thanks for sharing it.

    Reply
    0
  12. Valeriu Apr 12, 4:39 pm

    I only used webkit prefixes because this was only working on webkit browsers.

    Reply
    0
  13. Samad Aslam Khan Apr 26, 11:07 am

    Wow…. Awesome Slider, I can use it as a gallery or portfolio as well. I’m not a coder so will anyone guide me how to make the slide transaction auto?

    Reply
    0
  14. Elvis Salic Nov 29, 7:47 am

    Awesome tutorial man, I learned a lot from this.

    Reply
    0
  15. Bruce May 31, 5:42 am

    I enjoyed your tutorial very much. I noticed in the demo that you used a png image for the title and a jpg for the background. Why not use CSS3? I will try to create the title effect with text shadows. If it looks Ok I will let you know.

    Not Intended as a criticism. I’m just poking at you.

    Thanks

    Reply
    0
  16. jyothi Jul 10, 11:00 pm

    Nice tutorial……..Thanks for ur help in deigning my website image slide..
    I have a problem when i click on the thumbs my page jumps top ( people cant see my heading in main page) so please help me to solve this problem… i want the slide must be on the same place in a webpage….
    waiting for ur reply…..

    once again thanks very much for ur tutorial.

    Reply
    +1
  17. Sebastien Oct 29, 2:36 pm

    Thanks !! :)

    Very well explained and clear…

    Reply
    0
  18. Destiny Feb 16, 5:59 am

    This gallery is easy and looks really cool. I added to an iframe then noticed it jumped up out of the browser window a little.. I played around with if for a while before returning to this page only to find this one too jumps when I click on a thumb, random, it flicks up.. In it self not an issue but when in an iframe it does..

    Is there anything that can be done to fist this….

    Thank you..

    Destiny…

    Reply
    +1

Leave a Reply

*
* Minimum length: 20 characters