Skip to content

Instantly share code, notes, and snippets.

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">
background-color: #000;
width: 600px; margin: 40px auto;
} {
list-style: none;
} li a {
position: relative;
float: left;
padding: 10px 10px 25px 10px;
background: #FFF;
border: 1px solid #fff;
-moz-box-shadow: 0px 2px 15px #333;
} li a.pic-1 {
z-index: 1;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
} li a.pic-2 {
z-index: 5;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
} li a.pic-3 {
z-index: 3;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
} li a.pic-4 {
z-index: 4;
-webkit-transform: rotate(14deg);
-moz-transform: rotate(14deg);
} li a:hover {
z-index: 10;
-moz-box-shadow: 3px 5px 15px #333;
<div id="container">
<ul class="gallery">
<li><a href="" class="pic-1"><img src="" alt="Photograph of a waterfall" /></a></li>
<li><a href="" class="pic-2"><img src="" alt="Photograph of clouds and sunlight" /></a></li>
<li><a href="" class="pic-3"><img src="" alt="Photograph of a lake scene at dusk" /></a></li>
<li><a href="" class="pic-4"><img src="" alt="Photograph of a tree and green grass" /></a></li>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment