Using css transform, on focus the image will resize and rotate inspired by http://media.24ways.org/2009/14/3/index.html
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Polaroid</title>
<meta name="author" content="Natalie Downe">
<meta name="modified-by" content="html5snippets.com">
<style type="text/css">
body {
background-color: #E9E9E9;
color: #333;
font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;
font-size: 16px;
}
a.polaroid {
display: block;
margin: 10em auto 0 auto;
text-decoration: none;
color: #333;
padding: 13px 13px 26px 13px;
width: 200px;
border: 1px solid #BFBFBF;
background-color: white;
z-index: 2;
font-size: 0.8em;
-webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
-webkit-transition: all 0.5s ease-in;
}
a.polaroid img{
width:200px;
-webkit-transition: all 0.5s ease-in;
}
a.polaroid:hover,
a.polaroid:focus,
a.polaroid:active {
z-index: 999;
-webkit-box-shadow: 15px 15px 15px rgba(0,0, 0, 0.2);
-moz-box-shadow: 15px 15px 15px rgba(0,0, 0, 0.2);
box-shadow: 15px 15px 15px rgba(0,0, 0, 0.2);
-webkit-transform: rotate(0deg) scale(1.5);
-moz-transform: rotate(0deg) scale(1.5);
transform: rotate(0deg) scale(1.5);
}
a.polaroid:hover img,
a.polaroid:focus img,
a.polaroid:active img{
-webkit-transform: rotate(0deg) scale(1);
-moz-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
}
.polaroid img {
margin: 0 0 15px;
}
a img {
border: none;
display: block;
}
</style>
</head>
<body>
<div class="photo-album">
<a href="http://www.flickr.com/photos/breve/5580602932/in/photostream/" class="medium polaroid"><img src="http://farm6.static.flickr.com/5261/5580602932_69ae9a5886.jpg" alt="">Surfing in Costa Rica</a>
</div>
</body>
</html>
blog comments powered by Disqus View All Snippets