Submit your widget

simple CSS3 Slick Animated Image Caption

Created 3 years ago   Views 30052   downloads 7549    Author cooljaz124
simple CSS3 Slick Animated Image Caption
View DemoDownload 240.6 KB
117
Share |

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!