<!DOCTYPE html>
<head>
<meta charset='UTF-8' />
<title>Expanding Captioned Images</title>
<link rel='stylesheet' type='text/css' href='css/style.css' />
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src='js/example.js'></script>
</head>
<body>
/*
CSS-Tricks Example
by Chris Coyier
http://css-tricks.com
*/
* { margin: 0; padding: 0; }
body { font: 14px/1.4 Georgia, serif; }
h1 { font: bold 32px Helvetica, Sans-Serif; letter-spacing: -1px; margin: 0 0 15px 0; }
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
#page-wrap { width: 660px; margin: 60px auto; }
.image-gallery { margin: 20px 0 25px 0; }
figure {
width: 120px;
float: left;
margin: 0 20px 0 0;
background: white;
border: 10px solid white;
-webkit-box-shadow: 0 3px 10px #ccc;
-moz-box-shadow: 0 3px 10px #ccc;
-o-box-shadow: 0 3px 10px #ccc;
box-shadow: 0 3px 10px #ccc;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
position: relative;
}
figcaption {
text-align: center;
display: block;
font-size: 12px;
font-style: italic;
}
figure img {
width: 100%; /* Scale down */
}
figure:hover {
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-o-transform: rotate(1deg);
transform: rotate(1deg);
-webkit-box-shadow: 0 3px 10px #666;
-moz-box-shadow: 0 3px 10px #666;
-o-box-shadow: 0 3px 10px #666;
box-shadow: 0 3px 10px #666;
}
figure:focus {
outline: none;
-webkit-transform: rotate(-3deg) scale(2.5);
-moz-transform: rotate(-3deg) scale(2.5);
-o-transform: rotate(-3deg) scale(2.5);
transform: rotate(-3deg) scale(2.5);
-webkit-box-shadow: 0 3px 10px #666;
-moz-box-shadow: 0 3px 10px #666;
-o-box-shadow: 0 3px 10px #666;
box-shadow: 0 3px 10px #666;
z-index: 9999;
}
</style>
<div id="demo-top-bar">
<div id="demo-bar-inside">
<h2 id="demo-bar-badge">
<a href="/">CSS-Tricks Example</a>
</h2>
<div id="demo-bar-buttons">
<a href='/expanding-images-html5/' class='header-button'>← Back to Article</a> <a href='/downloads/' class='header-button'>More Demos →</a> </div>
</div>
</div>
<div id="page-wrap">
<h1>Expanding Captioned Images</h1>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<section class="image-gallery group">
<figure tabindex="1">
<img src="images/img-1.jpg" alt="jump, matey" />
<figcaption>Jump!</figcaption>
</figure>
<figure tabindex="2">
<img src="images/img-2.jpg" alt="jump, matey" />
<figcaption>Woah there!</figcaption>
</figure>
<figure tabindex="3">
<img src="images/img-3.jpg" alt="jump, matey" />
<figcaption>Crossed Axes</figcaption>
</figure>
<figure tabindex="4">
<img src="images/img-4.jpg" alt="jump, matey" />
<figcaption>Brothers in Arms</figcaption>
</figure>
</section>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<style type="text/css" style="display: none !important;">
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
}
#demo-top-bar {
text-align: left;
background: #222;
position: relative;
zoom: 1;
width: 100% !important;
z-index: 6000;
padding: 20px 0 20px;
}
#demo-bar-inside {
width: 960px;
margin: 0 auto;
position: relative;
}
#demo-bar-buttons {
padding-top: 10px;
float: right;
}
#demo-bar-buttons a {
font-size: 12px;
margin-left: 20px;
color: white;
margin: 2px 0;
text-decoration: none;
font: 14px "Lucida Grande", Sans-Serif !important;
}
#demo-bar-buttons a:hover,
#demo-bar-buttons a:focus {
text-decoration: underline;
}
#demo-bar-badge {
display: inline-block;
width: 302px;
padding: 0 !important;
margin: 0 !important;
background-color: transparent !important;
}
#demo-bar-badge a {
display: block;
width: 100%;
height: 38px;
border-radius: 0;
bottom: auto;
margin: 0;
background: url(/images/examples-logo.png) no-repeat;
background-size: 100%;
overflow: hidden;
text-indent: -9999px;
}
#demo-bar-badge:before, #demo-bar-badge:after {
display: none !important;
}
</style>
</body>
</html>