Skip to content

Instantly share code, notes, and snippets.

@ziedus

ziedus/dabblet.css

Forked from dgmid/dabblet.css
Created July 29, 2012 01:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ziedus/3195573 to your computer and use it in GitHub Desktop.
Save ziedus/3195573 to your computer and use it in GitHub Desktop.
Download ZIP
Animated HTML5 / CSS3 image caption - Example 6
Raw
dabblet.css
/**
* Animated HTML5 / CSS3 image caption - Example 6
*/
/* page styles */
body{
background: #fff;
min-height:100%;
}
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;
top: 0;
left: 0;
width: 200px;
line-height: 200px;
text-align: center;
color: #fff;
background-color: rgba(0,0,0,0.75);
font-size: 20px;
opacity: 0;
transform: rotate(60deg) scale(0,0);
transition: opacity .5s, transform .5s;
}
figure:hover figcaption {
opacity: 1;
transform: rotate(0deg) scale(1,1);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<body>
<figure>
<img src="http://www.midwinter-dg.com/blog_demos/css3-animated-image-captions/holmavik.png" width="200" height="200" alt="Hólmavík" />
<figcaption>Hólmavík</figcaption>
</figure>
<p>you can find more examples here:<br />
<a href="http://www.midwinter-dg.com/blog_demos/css3-animated-image-captions/" target="_blank">css3 animated image captions</a></p>
</body>
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment