Skip to content

Instantly share code, notes, and snippets.

@ddprrt

ddprrt/dabblet.css

Created June 11, 2012 11:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ddprrt/2909722 to your computer and use it in GitHub Desktop.
Save ddprrt/2909722 to your computer and use it in GitHub Desktop.
Download ZIP
Galleria
Raw
dabblet.css
/**
* Galleria
*/
body {
background-color:white;
background-image: linear-gradient(0, rgba(200,0,0,.5) 50%, transparent 50%),
linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%);
background-size:50px 50px;
}
.container {
position: absolute;
-webkit-filter: sepia(100%);
z-index: 1;
transition: all 0.7s ease;
}
.first {
top: 200px;
transform: rotate(45deg) scale(0.5);
}
.second {
left: 30px;
transform: rotate(-20deg) scale(0.5);
}
.third {
left: 50px;
transform: scale(0.4);
}
.container:hover {
transform: rotate(0deg) scale(1.0);
-webkit-filter: sepia(0%);
transition: transform 1.6s ease, -webkit-filter 0.6s ease 1.1s;
z-index: 2;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<a href="#"><div class="container first"><img src='http://www.liborius.de/uploads/tx_rgsmoothgallery/_c_Shotshop_ggj-2.jpg'/></div></a>
<a href="#"><div class="container second"><img src='http://www.tse-enns.at/upload/thumb/kategorienbig/AEC_Aussenansicht_Nacht1_Stadt_Linz.jpg'/></div></a>
<a href="#"><div class="container third"><img src='http://www.hdr-foto.at/uploads/pics/linz-pano_06.jpg'/></div></a>
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment