Build a Super Easy CSS Slider With Thumbnails

by on 15th November 2013 with 18 Comments

screenshot

Today’s project is another exploration of the types of practical applications that you can achieve with a little ingenuity and some fairly basic CSS. You’ll be blown away by how much you can achieve with just a few lines of code.

The final result with be a great way to display a strip of small image thumbnails that the user can hover to see larger images. Let’s dive in and see how it works.

The Concept

The basic layout here is pretty simple. We want a strip of thumbnail images and one large featured image. The tricky part is getting the featured image to change when the user hovers over one of the thumbnails.

screenshot

Sneak Peek: Click here to launch the finished product.

With CSS, you can’t create two distinct divs and then have the contents of one serve as an action point for the other. It’s easy enough in JavaScript, but CSS gives you less freedom in the way that you stack your selectors.

However, if we’re clever about how we structure our HTML, this project is actually fairly simple to pull off. Let’s see what this looks like.

The HTML

To make this work, we’re going to need four thumbnail images and four full size images. The key to having the former act upon the latter is to wrap them up together like so:

Here we have one anchor that surrounds both the small and the large image, and I’ve assigned a specific class to each. This will make it so that when the user hovers over one image, we can easily manipulate the other. We’ll see how all this works when we get to the CSS.

Now that we know how our page needs to be structured, we can repeat this pattern four times and throw it all into a container.

Notice that I finished off with a single large image. The reason for this is that the big images will slide into place on hover, leaving a big empty space when nothing is being hovered over. To fill this spot, I created a custom image:

screenshot

This is all the HTML that we’ll need, now it’s time to jump over and style this sucker.

Container Styles

In your CSS file, create a style block for the container. We start by setting its position to relative. We’re going to use absolute positioning later and setting the container to relative positioning will give us a boundary to work with.

After that, set the height and width to the value shown below. These aren’t arbitrary mind you but have been carefully calculated. Each thumbnail image is 200px wide, times four equals eight hundred, plus margins (4*40) equals 960px. Similarly, the thumbnails are 200px high, the big image is 400px and there will be 30px of margins for a total 660px high.

.container {
  position: relative;
  height: 660px;
  width: 960px;
  overflow: hidden;
  margin: 0 auto;
}

The reason we’re setting a specific height and width is so that we can slide an image out of the bounds of the container and have it be hidden. To this end, we also apply an overflow value of hidden and finish up by centering it all with auto margins.

Progress Check

We’re looking pretty rough at this point, but don’t worry, everything is right on track!

screenshot

Position Everything

As you just saw in the screenshot, your images are going to be all over the place at this point so now it’s time to coerce everything into its proper position.

Once again, this takes a little bit of hard thinking. We want all our thumbnails to group together and all of our big images to group together, but that’s not how the HTML is structured.

Given that each type of image (small and large) has its own class though, we can float all of our anchors to the left, and then separate out the large images by applying absolute positioning.

.container a {
  float: left;
  margin: 20px;
}

.big {
  position: absolute;
  top: 260px;
  left: 20px;
}

It’s very important to understand how this works so let’s run through it. Floating our links to the left made all of the images appear inline, one right after another. However, the absolute positioning on the big images pulls them out of this flow and places them specifically in the spot that we’ve designated using the top and left properties. This leaves only the thumbnail images to be floated.

Progress Check

With very little code we were just able to transform our mess of images into a nicely arranged layout. Note that you’ll only see one large image at this point because the others are stacked under it.

screenshot

Bring It To Life

Now that everything is in place, it’s time to make it work. The first thing that we want to do is move all of the big images except our featured cover out of the bounds of the container. This involves taking a step back and revising some of our previous code.

Go back and set all of the big images to be 900px from the top. This will push them outside of the bottom of our container. While you’re in there, you should also set up a transition. Target the top property and set the transition duration to one second and the timing function to ease.

.big {
  position: absolute;
  top: 900px;
  left: 20px;

  -webkit-transition: top 1s ease;
  -moz-transition: top 1s ease;
  -o-transition: top 1s ease;
  -ms-transition: top 1s ease;
  transition: top 1s ease;
}

This code pushes all of the big images out of bounds, including our cover image. Use the code below to bring this back.

.featured {
  top: 260px;
  left: 20px;
  z-index: -3;
}

Here we used the top and left values that we had established before to fix the cover to one spot. The z-index value ensures that this image will remain on the bottom of the stack. If we don’t do this, we won’t even be able to see the other images when they slide in!

Hover Styles

Now that we’ve placed all of the big images outside of the container, we need to bring them back when the user hovers. This is accomplished by targeting the big images and returning the top property to 260px. I also added a shadow effect to the thumbnails so you can see the hover taking effect.

a:hover .thumb {
  -webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
}

a:hover .big {
  top: 260px;
}

Because of the way we set up our HTML, each thumbnail automatically corresponds to its accompanying big image. So even though we’re hovering over the thumbnail, the browser sees it as all one anchor and doesn’t mind manipulating only the part with the big class applied. Pretty neat right?

See It In Action

With that, we’re all finished with our awesome slider. Take a look at the live demo below and hover over the thumbnails to give it a test drive. To showcase the versatility of this project, I included two alternate versions in the demo that implement slightly different animations. Be sure to check them out as well.

Demo: Click here to launch.

screenshot

Conclusion

If you were paying close attention, you learned a lot of stuff in this tutorial. First, we overcame the challenge of how to use one piece of an HTML document to act upon another using only CSS, which is no small feat. In addition to this, we learned some cool positioning techniques and even dabbled a bit with manipulating the image stacking order via z-index.

If you liked this tutorial, leave a comment and let us know. Do you have any other uses for remote hovers like we used here? I want to hear them!

Comments & Discussion

18 Comments

  • http://Notupatm Axiom

    Oh how I wish this was posted sooner. Would have saved me the grief of figuring out how to do something very similar to this a few weeks ago. (I’m pretty new to making websites). Really appreciate you sharing this tho and I think this gives me an interesting idea which I’m gonna go try out now. Thanks a million!

  • nutriaposa

    Thanks for this! I’ve only had time to skim the article first time round, but look forward to going through it all in depth. This will allow me to get rid of some javascript plugins from a couple of web sites and I expect to learn a lot from your article in the process. Thanks very much!

  • http://www.8bitworks.com mikeo

    Looks great. I’ll have to try it out. could have use this about 2 months ago.

    Nice job!

    .mike

  • http://www.thirty-third.com Jorge Chibante

    Hi, Great tutorial, will certainly be useful someday.

    However in IE9 the last thumb gets pushed down on top of the big image. In IE9 all the images get a strange border around possibly because of the anchor tags before. Adding the property ‘border-style: none’ to both the thumbs and the big images seems to solve this issue.

    I know IE it’s falling behind but IE9 it’s still used by a lot of people.

    Cheers

  • http://www.giometri.com egiova

    How smart is this slider! And simple, I like it.
    Next step: how to make it responsive(just kidding) ;)

  • http://www.wpsquare.com/ Bharat Chowdary

    As the title states its super easy to built this slider. Thanks for this cool and awesome slider, good job Joshua.

  • http://simplepage.net Try this

    Hello there, You’ve performed an excellent job. I’ll certainly digg it and in my opinion recommend to my friends. I am sure they will be benefited from this web site.

  • http://sportsbooksforbabies.com/ Baby Books

    Nice and clean. I like it.

  • halfbrain

    Cool stuff. Impressed at the result with such a small amount of code. For some of us noobs out there you may want to indicate that this is using CSS3.

    Also: While I use Firefox, I noticed this doesn’t work in IE (not working in IE 9 anyway).

  • HELP !

    Everything is working for me except the featured image that is meant to show up when nothing is being hovered over…I’ve copied the code exactly the same (except changed the image paths)…help!

  • Lara

    Great tutorial, looks awesome, but how do you adjust it to iPad? It doesn’t work on an iPad

  • Lara

    Here is a sample where it will not work on an iPad for me. It just reloads the whole page..
    Classproject.zbacupuncturestudio.com

  • Prabin Luitel

    hey i found it very useful..thank u so muchh

  • Menam

    Thanks it’s cool. im noob in css, so i have a questions. i have some different images, when the big images slide up my images always floats to the left. who i centered my big images when it slide up?
    thanks before.

  • Menam

    i mean i have some different images size. sorry :D

  • angela

    what about IE 8 :(

  • https://lukeseager.com Luke

    Great article! Just what I need for a client site :)

    Quick question though, is there a way to get it to default to the first item instead of having that place-holder image?

Subscribe
Membership
About the Author