Slide up captions using CSS3 transitions

October 31st, 2010

A couple of days ago, I came across an example using CSS3 transitions over at CSS-Tricks that was pretty cool but also reminded me of something I’d made a while back. I was just messing around trying to add a slide up caption to an image and just seeing if it was even possible. I love to see if you can replace common web effects that use JavaScript with just CSS3.

And using CSS3 transitions, it’s actually really easy to set up some sliding captions using just CSS. Here’s the HTML I used:

1
2
3
4
5
6
7
8
9
10
11
<div id="wrapper">
 <div class="slider" id="batman">
    <div><p>Batman is not amused</p></div>
 </div>
 <div class="slider" id="spiderman">
    <div><p>Spider-Man has a hyphen</p></div>
 </div>
 <div class="slider" id="wolverine">
    <div><p>Wolverine is in too many comics</p></div>
 </div>
</div>

Here I’ve created three divs that each have an id but also share the slider class. And the div inside the parent slider div is going to be the one that we apply the transition effect to. Next, we just need to set up the CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
#wrapper {
 width:300px;
 margin:auto;
}
#batman {
 background:url(images/batman.jpg) no-repeat;
}
#spiderman {
 background:url(images/spiderman.jpg) no-repeat;
 margin-top:20px;
}
#wolverine {
 background:url(images/wolverine.jpg) no-repeat;
 margin-top:20px;
}
.slider {
 width:300px;
 height:169px;
 overflow:hidden;
}
.slider div {
 width:300px;
 line-height:30px;
 padding-top:169px;
 -moz-transition:all 0.2s linear;
 -webkit-transition:all 0.2s linear;
 -o-transition:all 0.2s linear;
}
.slider div:hover {
 padding-top:139px;
}
.slider div p {
  margin:0;
  padding-left:5px;
  background:rgba(0,0,0,0.5);
  height:30px;
  color:#fff;
  font-family:Arial, sans-serif;
}

The important stuff here is what’s in .slider and it’s child properties. First we set the height and the width of the slider div and it’s overflow to hidden, this will hide the caption.

1
2
3
4
5
.slider {
 width:300px;
 height:169px;
 overflow:hidden;
}

Next, we set up the div inside the slider div. The important parts here is the padding-top is set to be the same as the height of the slider div. And here we set the transition properties, I’ve put in all for the property we want to effect just to make things easier, but it could also be set to padding-top and work the exact same. The time is set to 0.2 seconds because no one wants to wait to see a caption.

1
2
3
4
5
6
7
8
.slider div {
 width:300px;
 line-height:30px;
 padding-top:169px;
 -moz-transition:all 0.2s linear;
 -webkit-transition:all 0.2s linear;
 -o-transition:all 0.2s linear;
}

The property that we are going to change to make this effect work is the padding at the top of the div inside the slider div. Why? Because using CSS we can only effect an element that we are hovering over or clicking on. So we have to set the padding so we can shrink it and have the child paragraph tag slide up.

1
2
3
.slider div:hover {
 padding-top:139px;
}

You can check out a demo here.

The rest of the CSS is just for styling. Building something like this isn’t that complicated but there is something that I have added to my CSS wish list. I wish there was some way to set it in CSS that when you are interacting with one element on the page, you can have the effect on another element. This was something I thought we’d be able to do with the :target pseudo selector but it doesn’t appear to work that way. I’d love it if we could do something like this:

1
2
3
.slider:hover:target[.slider-up] {
 top:-20px;
}

This way we could set it up so that when the user hovers over the slider div, the slider-up div moves up 20 pixels. Maybe something like that will be added in the future, it really would make CSS even more powerful.

One Response to Slide up captions using CSS3 transitions

  1. Mark says:

    Great tutorial, I found CSS-TRICKS a little confusing but I have implemented yours beautifully. I will post a link to my finished website when it’s completed, if interested. I have one question; If I wanted the rollover to have a 5px margin on right, left and on the bottom how would this be achieved? I have an image with a 5px white border, so I need the rollover effect to be within the white borders, I can get the right and left working but not the bottom. Any ideas?

    Thanks

    Mark

Leave a Reply

Your email address will not be published. Required fields are marked *

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=""> <strike> <strong>