x

CSS and Jquery – Creating an Image Slider


Welcome to my first CSS tutorial in a long time. I"ve been working on various other projects and university work recently but want to get back to being as active as possible on the site. In this tutorial I am actually going to be explaining how to do something which I created for one of my other projects. Basically you are going to create a jquery effect. When a holder is hovered over the top image slides down to reveal the image underneath. I will also explain how to use position absolute to float an image in the top right to show the image is new.

First take a look at the example demo. Also note the image area is also a link. This requires this use of a transparent spacer image to work in internet explorer. I will go into that later on in the tutorial.

Sliding image using jquery.

The basic image sliding effect

The HTML

Okay let"s get stuck in. First of all we will do the HTML. We will start with a holder div to hold everything (images, price and title). This means it can be floated to the left or right so we could have three or four in a row. Inside the main holding div we will need a div to hold both images. It will have to have a position of relative to hold the absolutely positioned images (when a div is position absolutely it will position itself according to a relatively position container). So in my example the starting HTML should be something like so:

<div class="temp">
  <div class="temphol">
  <img src="images/thumb_screen_thumb.jpg" alt="Your Blog" border="0′/>
  <img src="images/screen_thumb.jpg" class="front" alt="color structure"  border="0′/>
  </div>
  </div>

The CSS

Right that"s simple enough isn"t it? Now for the CSS, which is also very simple. Let"s just think about it. The only things we really need to do is make sure the div holder "temphol" is positioned relatively, overflow is hidden and and images inside it are absolute positioned. The reason we need overflow to be hidden is that the jquery will just move the image down. If overflow is not hidden we will see the image move down instead of disappearing. I also included some padding and background properties to make it look a bit better.

  .temp{
  float:left;
  width:292px;
  margin:20px;
  }
  .temphol{
  background:#efefef;
  border:1px solid #ccc;
  position:relative;
  width:290px;
  height:155px;
  overflow:hidden;
  }
  .temphol img {
  position: absolute;
  top: 7px; left: 7px;
  } 

The JavaScript

Okay you should now be able to see one image in a holding div with a background. Now we will go over the jquery to get the sliding effect to work. First thing to take note – its really simple:

 <script type="text/javascript">
  $(function() {
  $(".temphol").hover(function() {
  $(this).children(".front").stop().animate({ "top" : ‘160px"}, 500);
  }, function() {
  $(this).children(".front").stop().animate({ "top" : ‘7px"}, 300);
  });
  });
  </script>

To get it to work you will need to put the above in your head section of your webpage and also include the jquery javascript framework. You can download it from their website. You will also need to add class="front" to the image which you want to show on the top to start with and also change .temphol in the above snippet to whatever your image holder class is. In my example you will notice my images have top:7px. This is just to create the border effect. You can easily do it where your images and position at the very top of the holder div. In this case you will need to change "top" : ‘7px" in the javascript snippet above.

You should now have a working image slider. You can view the demo so far here.

Adding the new image

Okay so now I will go over adding the new image into the top right. The first thing to do is create the image. If the image is a triangle such as in my example the image will need to be a PNG on a transparent background. To position it is simple; just add a new div after the two images with a class of new. Then in your CSS make sure this new class is position absolutely to the top right. Here is the code I used in my example:

 .new{
  background:url(images/new-trans.png) no-repeat top right;
  width:58px;
  height:58px;
  position:absolute;
  right:0;
  top:0;
  }
<div class="temp">
  <div class="temphol">
  <img src="images/thumb_screen_thumb.jpg" alt="Your Blog" border="0′/>
  <img src="images/screen_thumb.jpg" class="front" alt="color structure"  border="0′/>
  <div class="new"></div>
  </div>
  </div>

Please note that since you are using a PNG you will have to use a simple hack for it to work in internet explorer. You can find a working example here.

Making the whole thing into a link

Okay in this section we will make the whole thing into a link. We can"t make the images linkable as they will move and also the new image is positioned over the top of them. I"m not sure if this is the easiest way, but it"s the only way I could get to work. Basically what I did was add a div which is the same height and width of the main holding div and position it absolutely over the top and make it a link. It will also need to be transparent otherwise it will cover up everything we just created:

The CSS

.thumb{
  position:absolute;
  top:7px;
  left:7px;
  width:276px;
  height:141px;
  text-indent:-999px;
  overflow:hidden;
  background:url(images/blank.gif) repeat;
  }

Then to get it to work simple place the following after the closing div for new but still in the temphol holder:

 <a href="#" class="thumb">your link</a>

You will notice from the CSS for this to work you will need to create a blank.gif. This is simply a fully transparent image. This is needed for this effect to work in internet explorer. If the background is just set as none the link is considered not to exist and therefore not linkable.

Conclusion

Well I hope you enjoyed the tutorial and learned something. I went through using jquery to apply a sliding effect on images, adding a new image using position absolute and showed you how to create invisible links. You can view the finished demo including some extra CSS and HTML to make it into a scenario for a template website. You can also download the files.

View DemoDownload

If you want to request a tutorial or want to request a screencast please let me know and I will see what I can do.

[amazonshowcase_733ac72519229db9eaeb5eef3c5617f8]

Like this post?

If you liked this post and want to keep up-to-date with the website, please consider subscribing to our rss feed or following us on twitter.

Want to learn CSS fast?

Sick of reading tutorial after tutorial? Just want to learn CSS quickly and simply? Why not try lynda css screencast tutorials. You can learn everything you need to know about CSS in one place. The website is a great learning resource for all languages, CSS included. Why not check the website out for more details.

x

Related CSS Tutorials

  • CSS Poker Cards

    September 3, 2010 / No Comments

    Not really a tutorial but I developed some really simple cards. They are perfect for describing a poker hand or anything else involving cards. Check them out at the following link. Let me know if you encounter any problems or what to request anything.

    Read
  • jQuery Enhanced CSS Navigation

    July 4, 2010 / 3 Comments

    In this tutorial we will combine jQuery and CSS to create a nice tab style navigation. The basic effect we are creating is when you hover over a tab it raises up using jQuery.

    Read
  • 13 Awesome CSS and jQuery Navigations for Free

    February 13, 2010 / 17 Comments

    Today I have been experimenting with adding jQuery effects to navigations and links to create some pretty nice interfaces. I have written a brief description for each and include a download.

    Read

Comments

  1. Dominic says:

    Thanks for the tutorial. Outcome looks great!

  2. admin says:

    Thanks for the feedback Dominic :)

  3. adam says:

    awesome tutorial. can’t wait to see the rest of what you got…

  4. Loren Tracy says:

    I was wondering if anyone knows how to easily change how far the slide goes down and how to adjust its up position (after being down).

  5. Loren Tracy says:

    Never mind! I figured out like two minutes after posting! Thanks for the great tutorial though, I really appreciate it!

  6. melvin says:

    Cool tutorial, thanks tutorial added.

  7. excLuSive says:

    Thanks for the tutorial.

  8. rd says:

    Thanks for the tutorial. Outcome looks great!

    Awesome work…. Keep Going….

  9. Hi,

    This is the best tutorial of CSS. Presentation of article with code is also good.

  10. zubair says:

    Hi,
    Thanks for tutorial.
    it’s good & cool :)

  11. Desirae says:

    I like this tutorial, however, I would like a more in depth explanation about the animation on the jquery. Also it didn’t work until I put double quotes around the “160px” and the “7px”.

  12. Gina Gomez says:

    Very good tutorial..is it possible to add social plugins?

Leave a Comment

Awake is an amazing wordpress theme with over 30 unique style variations. Its our star buy at only $42!

Wordpress Themes

Other Websites

CSS Books