Skip to content

@ziedus /dabblet.css forked from dgmid/dabblet.css

Embed URL


Subversion checkout URL

You can clone with
Download ZIP
Animated HTML5 / CSS3 image caption - Example 1
* Animated HTML5 / CSS3 image caption - Example 1
/* page styles */
background: #fff;
p {
width: 300px;
margin: 0 auto;
text-align: center;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
a:link, a:visited {
color: #999;
text-decoration: none;
a:hover, a:active {
color: #0080ff;
/* image caption styles */
figure {
margin: 100px auto;
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
figcaption {
position: absolute; display: block;
width: 160px;
height: 50px;
left: 20px;
bottom: -50px;
text-align: center;
color: #fff;
background-color: rgba(0,0,0,.5);
line-height: 50px;
border-radius: 10px 10px 0 0;
transition: bottom .5s;
figure:hover figcaption {
bottom: 0px;
<img src="" width="200" height="200" alt="Víti" />
<p>you can find more examples here:<br />
<a href="" target="_blank">css3 animated image captions</a></p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.