Slide in CSS image captions

A small tutorial about creating slide in CSS image captions effect, using CSS and html5.

Beautiful slide in CSS image captions effect

Actually why we would like to do something like this? Perhaps saving space in a layout. Perhaps the captions themselves are a distraction in a specific design and it’s cleaner to only reveal them conditionally. Or just to have nice effect added to web project. Just try.

CSS slide in image captions
CSS slide in image captions

CSS Structure

The figure element wraps everything and is our basic building block. The empowering concepts start here. The figure will need to have position: relative; so we can absolutely position the caption exactly where we want it and not have it take up any additional space.

We also need overflow: hidden; so as we do our sliding, the caption disappears outside the boundary of the figure.

figure { 
  display: block; 
  position: relative; 
  overflow: hidden; 
}

figcaption { 
  position: absolute; 
  background: rgba(0,0,0,0.75); 
  color: white; 
  padding: 10px 20px; 
}

...

Above all, we need to add html5 markup, as well some CSS transitions, and adjust options. Please read full article, to get all the details.

Full tutorial:

https://css-tricks.com/slide-in-image-captions

Demo:

https://css-tricks.com/examples/SlideinCaptions

Enjoy!

Share:Share on Facebook2Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1