Creating a jQuery Slideshow – CSS for Descriptions

October 17, 2012
This post is part of a post series called jQuery Slideshow
  1. jQuery Slideshow - Options for Setup
  2. Creating a jQuery Slideshow From Scratch - Part 1
  3. Creating a jQuery Slideshow: Adding Arrow Navigation
  4. Creating a jQuery Slideshow - Styling with CSS
  5. Creating a jQuery Slideshow - Adding Descriptions
  6. Creating a jQuery Slideshow - CSS for Descriptions
  7. Creating a jQuery Slideshow - Setting up Thumbnails
  8. Creating a jQuery Slideshow - Clicking on Thumbnails
  9. Creating a jQuery Slideshow - Adding Thumbnail Navigation
  10. Creating a jQuery Slideshow - Adding Links to the Images

In this post series we’re creating a jQuery Slideshow from scratch. In the last post we added descriptions to our slideshow. In this post we’ll use a little CSS and a bit of jQuery to make the descriptions look good.

Note: The jsFiddle at the bottom of this post is a composite of all previous posts on this jQuery Slideshow.

Repositioning the Descriptions

Initially, our descriptions for the slideshow were located under the changing picture. But let’s make it more fancy, shall we? We’re going to move the descriptions on top of the images and give them a dark see-through background.

EXAMPLE: Bottom of Page

The first thing we need to do is change up where the “descriptions” Div is: we’re going to move it inside of the “holder” Div. Also, add another Div with an id “descriptionBack” right after that Div (lines 5 and 6).

<Div id="holder">
<div id="leftArrowD"><img src='' id='leftArrow' /></div>
<div id="rightArrowD"><img src='' id='rightArrow' /></div>
<img src="" id="slideshow" />
    <div id="description"></div>
    <div id="descriptionBack"></div>        

Then we’ll change the CSS for both of the Divs we just moved/created:

#descriptionBack { width:300px; height:40px; background-color:#000000; position:absolute; z-index:7; bottom:0px; left:0px;
                 opacity:.7; filter:alpha(opacity=70);}
#description { width:280px; padding:10px; position:absolute; z-index: 8; color:#fff; bottom:0px; left:0px; height:20px;}

The rest of the CSS stays the same (if you’re looking for the other CSS, check out the jsFiddle at the bottom).

Here’s what we’re doing: We created two Divs for just the description because we want one, the “descriptionBack” Div, to keep it’s opacity (.7) steady and wanted to add the padding for the text. There are multiple ways of accomplishing both of these items. In fact, it wouldn’t be difficult to simply do one Div and control it with the jQuery. But to keep the slideshow as straightforward as possible, I’m going with two different Divs here.

The position of both of these Divs are absolute, with a z-index based on the fact that we need both higher then the picture and the “description” Div higher then the “descriptionBack” Div. These Divs will align with the “holder” Div because the “holder” Div has a position:relative (otherwise it would align with the page or the next parent Div with the position set).

You might notice that the opacity is set twice in our “descriptionBack” Div. The second one, filer:alpha(opacity=70), is for IE8 and before. BUT if you look at our jQuery for fading in and out the “description” Div, you’ll find that we don’t have a separate item for IE. That’s because IE8 and before doesn’t work with the CSS opacity, but it DOES work with the jQuery opacity.

The rest of the CSS is pretty basic. We set the width and height, added padding for the text (10px all around, which we took off from the height and width), and set both on the bottom far left.

Hover, Slide-in Descriptions

But what if we want it even MORE awesome? Let’s make the descriptions disappear unless you hover over the image.

For this effect, we’re going to change just a few items in the CSS:

#descriptionBack { width:300px; height:40px; background-color:#000000; opacity:.7; position:absolute; z-index:7; bottom:-40px; left:0px; filter:alpha(opacity=70); }
#description { width:280px; padding:10px; position:absolute; z-index: 8; color:#fff; bottom:-40px; left:0px; height:20px;}

In both of these Divs, bottom:-40px; will start the them outside of the screen, instead of already on top. Additionally, we’ll need to make the “holder” Div overflow:hidden, so we don’t see the description divs.

#holder { height:300px; width:300px; position:relative; z-index:1; text-align:center; background-color:#333; overflow:hidden;}

And finally, the jQuery function:

//function for sliding Description in
        $('#description, #descriptionBack').stop().animate({
            bottom: 0,
        }, 400);
    }, function(){
        $('#description, #descriptionBack').stop().animate({
            bottom: -40,
        }, 400);

We’ll start with when the user hovers over the “holder” Div, which is the outermost Div of our slideshow.

Next we’ll take both Divs we created earlier, “description” and “descriptionBack”, and animate them. There are a few tricky things in this line. First, we reference both Divs when we start. The comma is the key here; if you miss that comma in between the Divs, it will look for the “descriptionBack” Div INSIDE of the “description” Div. The comma lets the computer know that it is actually referencing two different Divs here, not one inside of another.  Then we implement the built-in “stop()” function. This is for when the user hovers over and then out quickly, before the animation finishes. If you leave this out, the animation will build up. 

And that’s basically it. Note that for the built-in “hover” function in jQuery, the first section, up to line 6, is the part that happens when the user hovers over. The last section, line 6 “function” to the end, happens when the user hovers out. Also, for changing the CSS attribute bottom, you don’t add the “px” to it.

The Slideshow in jsFiddle:

Join the Discussion

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>