public
Created — forked from dgmid/dabblet.css

Animated HTML5 / CSS3 image caption - Example 5

  • Download Gist
dabblet.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
/**
* Animated HTML5 / CSS3 image caption - Example 5
*/
 
/* 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;
text-align: center;
color: rgba(255,255,255,1);
background-color: rgba(50,27,3,0.8);
border: 4px solid rgba(122,92,37,0.8);
display: block;
width: 700px;
line-height: 50px;
position: absolute;
top: 75px;
left: 50px;
white-space: nowrap;
font-size: 20px;
opacity: 0;
 
box-shadow: #fff8cf 0 0 15px;
transform: scale(4,1);
 
transition: all .5s;
}
 
figure:hover figcaption {
opacity: 1;
left: -250px;
 
transform: scale(1,1);
}
dabblet.html
HTML
1 2 3 4 5 6 7 8 9 10
 
<body>
<figure>
<img src="http://www.midwinter-dg.com/blog_demos/css3-animated-image-captions/dyrafjordur.png" width="200" height="200" alt="Dýrafjörður" />
<figcaption>Dýrafjörður</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>
settings.json
JSON
1
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.