Show animated text over a Faded image on Hover with Pure CSS3 Animation

Just recently, I was going through a project that I’ve worked on a couple of years ago and came across this piece of code and I thought it would be nice to share with beginners especially, who are still learning some basic animation using CSS3. The code that I am sharing here in this post is about how to display an animated text over a faded image on hover.

All I have on my web page is a container (a <div> element) with an image and a text inside another <div> element. When the page loads, all you will see is the image without the text on it. A text usually describes the images or a link etc. What I want is, when a user rolls the mouse over the image (hover), the text shows up animatedly from top to bottom and at precisely the same time the image fades.

Fading Image on Hover - Demo

Browser Support:
Chrome 39.0 - Yes | FireFox 34.0 - Yes | Internet Explorer 10 - Yes | Safari - Yes

Now let’s see the CSS style with a little markup. Simply, copy the below style and markup and paste it in your project.

The CSS3 Style

<!doctype html>
<html>
<head>
    <style>
        .container {
            position:relative;
            padding:0;
            width:400px;
            display:block;
            cursor:pointer;
            overflow:hidden;
        }
        .content {
            opacity:0;
            font:20px Calibri;
            position:absolute;
            top:0;
            left:0;
            color:#000;
            background-color:rgba(255,255,255,0.5);
            width:301px;
            height:300px;
            -webkit-transition: all 300ms ease-out;
            -moz-transition: all 300ms ease-out;
            -o-transition: all 300ms ease-out;
            -ms-transition: all 300ms ease-out;
            transition: all 300ms ease-out;
            text-align:center;
        }
        .container .content:hover { opacity:1; }
        
        .container .content .description {
            height:0;
            opacity:1;
            transition-delay: 0.1s;
            transition-duration: 0.4s;
        }
        .container .content:hover .description {
            opacity:1;
            transform: translateY(260px);
            -webkit-transform: translateY(260px);
        }
    </style>
</head>

The Markup

<body>
    <div class="container">
        <img src="https://www.encodedna.com/images/theme/easy-image-resizer.jpg" 
            width="301" height="300" alt="" />

        <div class="content">
            <div class="description">Easy Image Resizer</div>
        </div>
    </div>
</body>
</html>

The parent <div> with class container holds the image as well as the text that we need show on hover. There are two more classes, which you need focus, are the content and description.

The “.content” class

The first property in the content class is opacity with a value set as 0. This would hide every element inside the class in the beginning. Set the opacity value to 1 and see what happens.

I am also using the CSS3 transition property, which allows elements to change values animatedly, over a specified duration (the duration I have set is 300 milliseconds). This prevents the elements from changing properties immediately. It simply looks good.

-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;

The transition will fade the image slowly, that is in 300 milliseconds duration time. Though the transition actually happens when a user hovers (or rolls the mouse) over the image, you have to declare it before.

Next, is the .content:hover where I am setting the opacity as 1, to make things visible animatedly or slowly.

Note: Remove the transition part from the style and see what happens. The image fades quickly. There is no fun in it.

The .description class

Here, I’ll add properties to the text value that I wish to show up on hover as well. I want to display the text animated over the image and move from top to bottom.

I am using three different CSS3 properties here. The first two are transition-delay and transition-duration and the third is the transform property (set inside :hover).

The transition-delay will start a process after a delay of 0.1s. The process (in this context) is the moving of the text on hover. It’s a very small delay. The transition-duration (0.4s) is the time taken for the text to move from top to bottom.

Note: Change values of both the above properties and see the difference.

Finally, I have defined the CSS3 transform property for .content:hover .description.

.container .content:hover .description {
    transform: translateY(260px);
    -webkit-transform: translateY(260px);
}

This property allows you to modify the coordinates of an element. Using this property, you can either translate an element, rotate it, scale the element or even skew it.

The value that I have assigned to the “transform” property is translateY, with a value 260px. Since, I am a moving the text vertically, I’ll translate its Y coordinate.

Note: Use translateX if you wish to move the text horizontally, that is, from left to right.

The fall (or speed) of the text is controlled by this property.

transition-duration: 0.4s;

See this demo

That’s it. Hope you like this article and example. Thanks for reading. ☺

← PreviousNext →

Show animated text over a Faded image on Hover with Pure CSS3 Animation

Tools you can use

The “.content” class

The .description class