Animated image captions using CSS3

Animated CSS3 image galleries are quite popular as they are fast loading and can create impressive designs. I've create 5 demos for the outline of these images. The captions and image simple animations can create a cool gallery. Have a look at demo:

Fork On Github

See the Pen CSS3 image captions by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

Ease-Of-Using

The best way to utilize the image captions is the following format:

<div class='demo1 demo'>
    <div class='imagebox'>
        <img src='/imageURL.jpg' />
        <div class='caption'>
<h3>Heading</h3>
            <p>Caption Detail</p>
<span>Read More</span>
        </div>
    </div>
</div>

Just replace demo1 with demo1-5.

Read More:CSS3 transition effect tips for better animation

Animation Properties

In every 5 demos different types of animation is being used. Every animation tells its own story:

Demo 1

Plays with opacity (initially opacity is zero), while the position is set to absolute and left and top to zero. This creates a overlaying layer of caption in front of image. On hover state the the caption layer appears (due to opacity:1) and transition property creates the animation.

Demo 2

It is somehow same but creates a bit difference. The position is set to absolute and left to zero but due to top 100% the caption is out of the box right now. I've also set the opacity to zero. On hover state the opacity increase to 1 and the top gets to zero which creates an effect of slide and fade both. using some delay transition I've also animated the heading and caption content.

Demo 3

The image and caption both are absolute in position and stands side by side. Image have top and left zero but the caption have top zero but left to 100%, which sets the caption aside of image. On hover state the image goes negative left that is -100% while caption gets left to 0. This simultaneous action creates a better sliding animation.

Demo 4 and Demo 5

In demo 4 the position and all the stuff is same as demo one, to create difference and impression, I've changed the hover state properties. For demo 4 I've added rotate3d for X axis rotation and set to 90 deg which rotates and disappears the image, well rotateX can also be used here. For Demo 5 I've used scale as a transform. On hover state the scale is set to 1 which popes-out the caption on the image.