CSS

CSS Sliding Caption Reveal

Posted on by

One of my favorite features of my site and one of my most popular code demos on CodePen, is my CSS sliding caption reveal, so I thought I’d write a post about it. I’ve seen these types of features a lot on websites, where you have a gallery of some sort and when you hover over the image, there’s an overlay that fades or slides in with a description and/or link. Personally, I think like this type of feature and think it’s pretty cool, so I coded my own version of it.

It’s actually not too complicated and gives you a pretty good result and can be very flexible.

The Markup

I coded this demo so the caption will slide in from every direction, but for the article’s sake, I’ll just be demoing sliding in from the top.

HTML


<div class="screenshot">
  <img src="http://placekitten.com/300/200">
  <div class="screenshot-caption screenshot-caption_top">
    <h1>Top to Bottom</h1>
    <a href="#">Read More</a>
  </div>
</div>

Base Styling

First, we have to set a few styles to the screenshot module so we can get these divs ready to do their thing and slide in. What this styling does is set the parent div of .screenshot to hide anything that exceeds the size of it’s container (which the caption eventually will), and also positions it so the child element of .screenshot-caption will “connected” when we position it absolutely.

Also, this styling makes sure that .screenshot-caption is the same width and height and it’s parent so it will overlay nicely. I also gave it an opaque background color so some of the image will still show through.

CSS


.screenshot {
  position: relative;
  overflow: hidden;
}

.screenshot > * { display: block; }

.screenshot-caption {
  position: absolute;
  width: 100%;
  height: 100%;
  /*customize below*/
  background: rgba(44,62,80,.4);
  color: #ffffff;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

Sliding the Captions

Now that the base styling is setup, we need to move the caption away from the image and since we set the screenshot caption to be positioned absolute, we can easily do this. That is what the .screenshot-caption_top extension is for in the markup. So, since we want it to slide in from the top, we need to move the caption above the image so it can slide down in to view and then when hovering, we position the caption back to 0 so it’s directly over the image. We also use transitions so that way it gives the appearance of sliding while it changes positions and just looks much nicer than it just harshly appearing over the image.

CSS


.screenshot-caption_top {
  top: -100%;
  left: 0;
}

.screenshot:hover .screenshot-caption {
  top: 0;
  left: 0;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}

We’re Not Done Yet

This is cool and all, but I don’t know about you, I like to add a little extra jazz to take this effect a step further by also fading the text in and out as the caption slides. This adds a nice subtle effect and gives you a bit nicer experience. To do that, we just set the opacity of everything inside of the slide-caption div to 0 and when it’s hovered on, we set it to 1, and transition it.

CSS


.screenshot-caption > * {
  -webkit-transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  transition: opacity 1s ease;
  opacity: 0;
}

.screenshot:hover .screenshot-caption > * {
  -webkit-transition: opacity 1s ease;
  -moz-transition: opacity 1s ease;
  transition: opacity 1s ease;
  opacity: 1;
 
}

Full Demo

What I also really like about this is it’s flexibility. You can easily make this responsive and float the captions to the right of the images and stack them on mobile devices. You can check that out here on my portfolio page by shrinking the screen.

Here is my CodePen that has the full demo, including all of the different directional caption reveal.

See the Pen CSS Hover Caption Reveal by Jason Kinney (@jason-kinney) on CodePen.

Leave a Reply