CSS3 Image Gallery

dabblet.css

/**
 * CSS3 Image Gallery
 */

body {
  background: black url(http://subtlepatterns.com/patterns/dark_wood.png);
  font: 14px "Helvetica Neue", Helvetica, sans-serif;
}
h2 {
  color: white;
  text-align: center;
  font-weight: 400;
}
h2 a {
  color: #00b2e9;
  text-decoration: none;
}
.container {
  float: left;
  position: relative;
  width: 410px;
  height: 310px;
  margin: 20px;
  color: rgba(0,0,0,0.4);
  background: #333;
  transition: all 0.5s ease-out;
  perspective: 1800;
  perspective-origin: top;
  text-decoration: none;     	
}
.beschreibung {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 5px 8px;
}
strong {
  color: black;
}
.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 300px;
  background-color: whiteSmoke;
  color: #444;
  padding: 5px;
  transform: rotateX(0deg); 
  transform-origin: top;	
  transition: all 1s ease;
}
.container:hover .image {
  transform: rotateX(36deg);
  transition: all 0.4s ease;
  box-shadow: 0 6px 5px rgba(0,0,0,0.2);	
 }
.container:hover {
  background-color: white;
  transition: background 0.45s ease-in;
}

dabblet.html

<h2>CSS 3D Gallery by <a href="http://twitter.com/max_hoffmann" title="follow me :)">@max_hoffmann</a></h2>

<div class="container">
<div class="beschreibung"><strong>Music</strong> by Jonathan Ogden</div>
	<a href="http://dribbble.com/shots/354228-Music" class="image">
		<img src="http://dribbble.com/system/users/7179/screenshots/354228/music.jpg?1324029035">
	</a>
</div>

<div class="container">
<div class="beschreibung"><strong>JourneeList</strong> by Matthew Skiles</div>
	<a href="http://dribbble.com/shots/215111-JourneeList" class="image">
		<img src="http://dribbble.com/system/users/2404/screenshots/215111/journeelist.png?1310854434">
	</a>
</div>

<div class="container">
<div class="beschreibung"><strong>g</strong> by Gert van Duinen</div>
	<a href="http://dribbble.com/shots/106684-g" class="image">
		<img src="http://dribbble.com/system/users/13604/screenshots/106684/shot_1296221891.png?1309029414">
	</a>
</div>

<div class="container">
<div class="beschreibung"><strong>Wunderlist</strong> for Windows Phone 7 by Benjamin Rösner</div>
	<a href="http://dribbble.com/shots/349145-Wunderlist-for-Windows-Phone-7" class="image">
		<img src="http://dribbble.com/system/users/12204/screenshots/349145/wunderlist-winphone.png?1323773440">
	</a>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}