Image Caption Effects with CSS

Image Caption Effects with CSS Best WordPress Hosting

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



Leave a Reply

Your email address will not be published. Required fields are marked *