Image Caption Effects with CSS

In this post, I am going to show how to create simple image hover effects. Basic idea in the post we use to show an image. And display the caption when take mouse over the image. We will use css transform in the effects to make it better and look cool.

Image Caption Effects with CSS

 Demo Download

All these transition effects works only in modern browsers.

First of add the image and caption. See the code below. Change the image URL and caption according to you. You can also add URL in caption.

Now, we will align image and caption based on the effects we want to have.

Effect 1:

For effect 1, we will place the caption behind the image. and caption at the bottom of the div.

on hover, we will move image above by using CSS transform. We will transform the image up by 80 pixels. You can change the transition as per your choice.

Effect 2: For this, we have used similar approach. But caption is at the top of the div and we will transform image to the down side.

Effect 3. It is the similar to the effect 2. Caption is at the top. But transformation is in both side. And this time, we will transform caption not image.

 Demo Download

advertisement

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest updates, web design resources and tools.

You have Successfully Subscribed!

About The Author

    ADD YOUR COMMENT

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Receive fresh web design resources and SEO tips in your email by our weekly newsletter

You have Successfully Subscribed!