simple CSS3 Slick Animated Image Caption

Home Image Effectssimple CSS3 Slick Animated Image Caption

simple CSS3 Slick Animated Image Caption

13 years ago Views

24153

6415

cooljaz124

simple CSS3 Slick Animated Image Caption

This is a simple CSS3 animated image caption. it's very common, useful.

the CSS code.

.container{
height:200px;width:400px;
background:#000;
overflow:hidden;
position:relative;
}
.text{
background:rgba(0,0,0,0.5);
top:-70px;
color:white;
font:14px Georgia,serif;
height:auto;width:inherit;
position:absolute;
/* CSS3 Transition Magic */
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.text a{
color:#fff;
display:block;
padding:15px;
text-decoration:none;
/* CSS3 Transition Magic */
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .5s ease-out;
transition: all .4s ease-out;
}
.text a:hover{
color:red;
text-decoration:none;
}
.container:hover .text{
top:0;
}

The whole Html Code.

<div class="container">
    <img src="your image url" alt="image" />
    <article class="text">
        <h2><a href="#">Text to be transitioned.</a></h2>
    </article><!-- .text -->
</div><!-- .container -->

With this our CSS3 Slick Animated Image Caption is complete!

Tag: image hover