Blogger Ever

Animated image captions using CSS3

Create impressive image galleries with cool animated CSS3 captions.

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:
See the Pen CSS3 image captions by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.


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'>
            <p>Caption Detail</p>
<span>Read More</span>
Just replace demo1 with demo1-5.

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.

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.