Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
This provides a CSS template for layout out photos on a page and using for a print photo book.
<style type="text/css">
body{
background-color: #000;
}
#container{
width: 600px; margin: 40px auto;
}
ul.gallery {
list-style: none;
}
ul.gallery li a {
position: relative;
float: left;
padding: 10px 10px 25px 10px;
background: #FFF;
border: 1px solid #fff;
-moz-box-shadow: 0px 2px 15px #333;
}
ul.gallery li a.pic-1 {
z-index: 1;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
}
ul.gallery li a.pic-2 {
z-index: 5;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
}
ul.gallery li a.pic-3 {
z-index: 3;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
}
ul.gallery li a.pic-4 {
z-index: 4;
-webkit-transform: rotate(14deg);
-moz-transform: rotate(14deg);
}
ul.gallery li a:hover {
z-index: 10;
-moz-box-shadow: 3px 5px 15px #333;
}
</style>
<div id="container">
<ul class="gallery">
<li><a href="http://www.flickr.com/photos/kinlane/5429286065/" class="pic-1"><img src="http://farm6.static.flickr.com/5140/5428853547_daa0937b1e_m.jpg" alt="Photograph of a waterfall" /></a></li>
<li><a href="http://www.flickr.com/photos/galego/3131005845/" class="pic-2"><img src="http://farm6.static.flickr.com/5297/5429381698_31a628a702_m.jpg" alt="Photograph of clouds and sunlight" /></a></li>
<li><a href="http://www.flickr.com/photos/claudio_ar/1810490865/" class="pic-3"><img src="http://farm6.static.flickr.com/5137/5426148871_27bbb9382e_m.jpg" alt="Photograph of a lake scene at dusk" /></a></li>
<li><a href="http://www.flickr.com/photos/claudio_ar/2952099761/" class="pic-4"><img src="http://farm6.static.flickr.com/5011/5402622906_b3ef457da0_m.jpg" alt="Photograph of a tree and green grass" /></a></li>
</ul>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.