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.

<div class="grid">
            <img src="" alt="img01">
                <h2>JPEG Image Compression</h2>

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.

	margin: 10px;

.grid figure

.grid figure img
	top: 0;
        left: 0;
        display: block;
        position: relative;
        transition: transform 0.4s;
	-webkit-transition: transform 0.4s;
	z-index: 10;
.grid figure figcaption {
        text-align: center;
        backface-visibility: hidden;
	background: #2c3f52;
        color: #fff;

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.

.grid figure:hover img

    transform: translateY(-80px);
    -webkit-transform: translateY(-80px); /* Chrome, Safari, Opera */
    -webkit-transform: translateY(-80px); /* Mozilla */

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.

.grid2 figure:hover figcaption 
    transform: translate(10px, 10px);
    -webkit-transform: translate(10px, 10px); /* Chrome, Safari, Opera */

 Demo Download

Tags: | |
Nord VPN Sale

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.

Similar Articles

2020 UseThisTip | Developed By Deepanker