CSS3 Animated Polaroid Photo Gallery Tutorial
I was tossing around a few ideas and this is what came of it. I think it turned out pretty slick! "javascript:;" in the href is only there so it doesn't launch you to the top of the screen upon click - mainly for mobiles as they only hover onclick, and if it's within an anchor, and with a active href="".
The CSS
#polaroid {
width:700px;
margin:40px auto;
list-style:none;
}
#polaroid:after {
content:'';
display:block;
clear:both;
}
#polaroid li {
transform:rotate(10deg);
-ms-transform:rotate(10deg);
-moz-transform:rotate(10deg);
-webkit-transform:rotate(10deg);
-o-transform:rotate(10deg);
float:left;
margin:-10px;
}
#polaroid li:nth-child(odd) {
transform:rotate(-10deg);
-ms-transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
-o-transform:rotate(-10deg);
position:relative;
bottom:10px;
left:5px;
}
#polaroid li:nth-child(3n) {
transform:rotate(2deg);
-ms-transform:rotate(2deg);
-moz-transform:rotate(2deg);
-webkit-transform:rotate(2deg);
-o-transform:rotate(2deg);
position:relative;
top:-10px;
right:10px;
}
#polaroid li:hover {
position:relative;
z-index:1;
}
#polaroid a {
float:left;
padding:10px 10px 45px 10px;
width:160px;
height:160px;
background:#fff;
box-shadow:0px 4px 6px #000, inset 0 0 6px #333;
border-radius:4px;
cursor:default;
text-align:center;
text-decoration:none;
color:#000;
}
#polaroid a:before {
position:absolute;
content:'';
width:160px;
height:160px;
box-shadow:inset 0 0 5px 5px #000;
}
#polaroid a:after {
content:attr(title);
display:block;
padding:7px 0 0;
font:bold 16px Times, serif;
}
#polaroid a:hover {
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
-webkit-transform:rotate(350deg) scale(2);
-moz-transform:rotate(350deg) scale(2);
-o-transform:rotate(350deg) scale(2);
transform:rotate(350deg) scale(2);
}
#polaroid li:nth-child(odd) a:hover {
-webkit-transform:rotate(370deg) scale(2);
-moz-transform:rotate(370deg) scale(2);
-o-transform:rotate(370deg) scale(2);
transform:rotate(370deg) scale(2);
}
#polaroid li:nth-child(3n) a:hover {
-webkit-transform:rotate(358deg) scale(2);
-moz-transform:rotate(360deg) scale(2);
-o-transform:rotate(360deg) scale(2);
transform:rotate(358deg) scale(2);
}
The HTML
<ul id="polaroid"> <li><a href="javascript:;" title="Title 1"><img src="images/scenery1.jpg" height="160px" width="160px"></a></li> <li><a href="javascript:;" title="Title 2"><img src="images/scenery2.jpg" height="160px" width="160px"></a></li> <li><a href="javascript:;" title="Title 3"><img src="images/scenery3.jpg" height="160px" width="160px"></a></li> <li><a href="javascript:;" title="Title 4"><img src="images/scenery4.jpg" height="160px" width="160px"></a></li> <li><a href="javascript:;" title="Title 5"><img src="images/scenery5.jpg" height="160px" width="160px"></a></li> <li><a href="javascript:;" title="Title 6"><img src="images/scenery6.jpg" height="160px" width="160px"></a></li> <li><a href="javascript:;" title="Title 7"><img src="images/scenery7.jpg" height="160px" width="160px"></a></li> <li><a href="javascript:;" title="Title 8"><img src="images/scenery8.jpg" height="160px" width="160px"></a></li> <li><a href="javascript:;" title="Title 9"><img src="images/scenery9.jpg" height="160px" width="160px"></a></li> <li><a href="javascript:;" title="Title 10"><img src="images/scenery10.jpg" height="160px" width="160px"></a></li> <li><a href="javascript:;" title="Title 11"><img src="images/scenery11.jpg" height="160px" width="160px"></a></li> <li><a href="javascript:;" title="Title 12"><img src="images/scenery12.jpg" height="160px" width="160px"></a></li> </ul>
