Skip to content

Instantly share code, notes, and snippets.

@maxhoffmann
Created December 19, 2011 17:18
Show Gist options
  • Save maxhoffmann/1498034 to your computer and use it in GitHub Desktop.
Save maxhoffmann/1498034 to your computer and use it in GitHub Desktop.
CSS3 Image Gallery
/**
* 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;
}
<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>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment