Image Gallery

dabblet.css

/**
 * Image Gallery
 */
 
 body{
 	background: black url(http://subtlepatterns.com/patterns/dark_wood.png);
 	font: 14px sans-serif;
 	
 }
 .container{
 	float: left;
        position: relative;
 	width: 410px;
 	height: 310px;
 	margin: 20px;
 	color: rgba(0,0,0,0.4);
 	background: #333;
  	transition: ease-out 0.5s;
       	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: ease 1s;
 }
 .container:hover .image {
 	transform: rotateX(36deg);
 	transition: ease 0.4s;
   	box-shadow: 0 6px 5px rgba(0,0,0,0.2);	
 }
 .container:hover {
 	background-color: white;
 	transition: ease-in 0.45s;
 }

dabblet.html

<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","prefixfree":"1","page":"css"}