Create Animate CSS Image Hover Effect Text

Create awesome animate CSS image hover effect text using CSS transition properties. When the mouse hovers on the image, the text is show animate type display and when mouse focuses out automatic animate return back to normal situation. So let’s start to create a CSS image hover effect text.

First of all, you have to know basic HTML tags. If you are beginner, you should need to learn it first. Here is a lesson of basic HTML tags.

Here is HTML code to display div tag with an assign id attribute value. And set a background image. Inside this container, you need to write one div tag for the transition effect. One more step inside to that div element, you have to write one more div element to store text contains. When the mouse hovers over the text container, text element will visible and when the mouse hovers out the text container element hide.

<div id="container">
    <div class="img_transition">
        <div class="show-message">
            Couple Love <br /><br /> 
I Love You... doesn't mean only those three little words of love, It 
also means I miss you every moment when you are not here with me, It 
means i trust you with all my heart, it means i believe in everything 
you say and it also means i need you here for the rest of my life...
        </div>
    </div>
</div>

Write the following CSS styles for above HTML elements.

#container { 
    width: 540px; 
    height: 320px; 
    background: url(couple.jpg) 0 0 no-repeat;
    border: 1px solid #ccc; 
    position: relative;
}
.img_transition { 
    transition-duration: 0.5s;          /* W3C */   
    -webkit-transition-duration: 0.5s;  /* Google Chrome/Safari Support */
    -moz-transition-duration: 0.5s;     /* Mozilla Firefox Support */ 
    -o-transition-duration: 0.5s;       /* Opera Support */
    overflow: hidden;
    height: 0px; 
}
#container:hover .img_transition { 
    height: 115px; 
}
.show-message { 
    transform-origin: top;              /* W3C */
    transition-duration: 0.5s;          /* W3C */   
    -webkit-transform-origin: top;      /* Google Chrome/Safari Support */
    -webkit-transition-duration: 0.5s;  /* Google Chrome/Safari Support */
    -moz-transform-origin: top;         /* Mozilla Firefox Support */
    -moz-transition-duration: 0.5s;     /* Mozilla Firefox Support */
    -o-transform-origin: top;           /* Opera Support */
    -o-transition-duration: 0.5s;       /* Opera Support */
    font-size: 16px;
    font-family: 'MyriadPro-Light', Arial;      
    font-weight: normal;
    color: #FFF;        
}

#container:hover .show-message { 
    background: rgba(0, 0, 0, 0.5); 
    color: #fff;
    height: 115px;      
    transform: rotateX(0deg);           /* W3C */   
    -webkit-transform: rotateX(0deg);   /* Google Chrome/Safari Support */
    -moz-transform: rotateX(0deg);      /* Mozilla Firefox Support */ 
    -o-transform: rotateX(0deg);        /* Opera Support */
}

Furthermore, you notice that the first div elements store background image with a specific size and position. Inside the div elements contains CSS transition duration to show effect. And last div element inside them stores actual text contains. In this way, the image hovers effect we created using HTML and CSS.