Skip to content

Instantly share code, notes, and snippets.

@dgmid
Created March 9, 2013 10:42
Show Gist options
  • Save dgmid/5123806 to your computer and use it in GitHub Desktop.
Save dgmid/5123806 to your computer and use it in GitHub Desktop.
generic caption styles
@import url(http://fonts.googleapis.com/css?family=Pontano+Sans);
body {
width: 600px;
margin: 20px auto 100px auto;
background: #2c3e4f;
color: #ecf0f5;
font: 13px/21px "Pontano Sans";
}
h1 {
clear: both;
font-size: 18px;
font-weight: normal;
font-style: normal;
}
h1 span {
font-size: 12px;
color: #bdc3c7;
}
p {
clear: both;
padding-top: 40px;
text-align: right;
}
a:link, a:visited {
color: #19bc9c;
}
a:hover {
text-decoration: none;
}
a:active {
color: #15a085;
}
.horizontal,
.vertical,
.diagonal-1,
.diagonal-2 {
width: 200px;
height: 200px;
float: left;
position: relative;
-webkit-perspective: 850px;
-moz-perspective: 850px;
perspective: 850px;
}
.green {
background: #2dcc71 url(http://www.midwinter-dg.com/blog_demos/animated-image-captions-v2/images/camera.png) no-repeat center center;
}
.blue {
background: #3498db url(http://www.midwinter-dg.com/blog_demos/animated-image-captions-v2/images/camera.png) no-repeat center center;
}
.purple {
background: #9b59b6 url(http://www.midwinter-dg.com/blog_demos/animated-image-captions-v2/images/camera.png) no-repeat center center;
}
.red {
background: #e74c3c url(http://www.midwinter-dg.com/blog_demos/animated-image-captions-v2/images/camera.png) no-repeat center center;
}
.orange {
background: #e67e2a url(http://www.midwinter-dg.com/blog_demos/animated-image-captions-v2/images/camera.png) no-repeat center center;
}
.grey {
background: #95a5a6 url(http://www.midwinter-dg.com/blog_demos/animated-image-captions-v2/images/camera.png) no-repeat center center;
}
figure {
margin: 0;
width: 200px;
height: 200px;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
figure img, figure figcaption {
display: block;
height: 200px;
width: 200px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
figure figcaption {
line-height: 340px;
color: rgba(255,255,255,.8);
text-align: center;
font-weight: bold;
font-size: 14px;
}
/* generic caption styles */
/* vertical */
.vertical figure img {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
.vertical:hover figure {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
/* end vertical */
/* horizontal */
.horizontal figure img {
-webkit-transform: rotateX( 180deg );
-moz-transform: rotateX( 180deg );
transform: rotateX( 180deg );
}
.horizontal:hover figure {
-webkit-transform: rotateX( 180deg );
-moz-transform: rotateX( 180deg );
transform: rotateX( 180deg );
}
/* horizontal */
/* diagonal 1 */
.diagonal-1 figure img {
-webkit-transform: rotate3d(2,4,0,180deg);
-moz-transform: rotate3d(2,4,0,180deg);
transform: rotate3d(2,4,0,180deg);
}
.diagonal-1:hover figure {
-webkit-transform: rotate3d(2,4,0,180deg);
-moz-transform: rotate3d(2,4,0,180deg);
transform: rotate3d(2,4,0,180deg);
}
/* diagonal 1 */
/* diagonal 2 */
.diagonal-2 figure img {
-webkit-transform: rotate3d(4,2,0,180deg);
-moz-transform: rotate3d(4,2,0,180deg);
transform: rotate3d(4,2,0,180deg);
}
.diagonal-2:hover figure {
-webkit-transform: rotate3d(4,2,0,180deg);
-moz-transform: rotate3d(4,2,0,180deg);
transform: rotate3d(4,2,0,180deg);
}
/* diagonal 2 */
<h1>Animated image captions v2 <span>— using backface-visibility</span></h1>
<div class="vertical">
<figure>
<img src="http://www.midwinter-dg.com/blog_demos/animated-image-captions-v2/images/jimi-hendrix.png" alt="Jimi Hendrix" width="200" height="200" />
<figcaption class="green">Jimi Hendrix</figcaption>
</figure>
</div>
<div class="diagonal-1">
<figure>
<img src="http://www.midwinter-dg.com/blog_demos/animated-image-captions-v2/images/dave-gilmour.png" alt="Dave Gilmour" width="200" height="200" />
<figcaption class="blue">Dave Gilmour</figcaption>
</figure>
</div>
<div class="horizontal">
<figure>
<img src="http://www.midwinter-dg.com/blog_demos/animated-image-captions-v2/images/brian-may.png" alt="Brian May" width="200" height="200" />
<figcaption class="purple">Brian May</figcaption>
</figure>
</div>
<div class="diagonal-2">
<figure>
<img src="http://www.midwinter-dg.com/blog_demos/animated-image-captions-v2/images/steve-hackett.png" alt="Steve Hackett" width="200" height="200" />
<figcaption class="red">Steve Hackett</figcaption>
</figure>
</div>
<div class="vertical">
<figure>
<img src="http://www.midwinter-dg.com/blog_demos/animated-image-captions-v2/images/joni-mitchell.png" alt="Joni Mitchell" width="200" height="200" />
<figcaption class="orange">Joni Mitchell</figcaption>
</figure>
</div>
<div class="diagonal-1">
<figure>
<img src="http://www.midwinter-dg.com/blog_demos/animated-image-captions-v2/images/jimmy-page.png" alt="Jimmy Page" width="200" height="200" />
<figcaption class="grey">Jimmy Page</figcaption>
</figure>
</div>
<p>blog article - <a target="_blank" href="http://www.midwinter-dg.com/permalink-animated-image-captions-v2-using-backface-visibility_2013-03-09">Animated image captions v2 - using backface-visibility</a></p>
// alert('Hello world!');
{"view":"separate","fontsize":"110","seethrough":"","prefixfree":"","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment