Skip to content

Instantly share code, notes, and snippets.

@schadeck

schadeck/dabblet.css

Created March 23, 2012 19:42
Show Gist options
  • Save schadeck/2174227 to your computer and use it in GitHub Desktop.
Save schadeck/2174227 to your computer and use it in GitHub Desktop.
Download ZIP
CSS# Card Deck Expand
Raw
dabblet.css
/**
* CSS# Card Deck Expand
*/
*{padding:0px;margin:0px;}
.cards{
position: relative;
height: 200px;
width: 200px;
float: left;
margin: 20px;
}
.cards:hover{
z-index: 1000;
}
.card{
display: block;
position: absolute;
top:0px;
left: 0px;
width: 200px;
height: 200px;
background: #fff;
transition: all 0.3s ease-in-out;
overflow: hidden;
padding: 10px;
box-shadow:#555 0px 1px 5px;
}
.card:nth-child(2){
height: 194px;
width: 194px;
top: 3px;
left: 8px;
}
.card:nth-child(1){
height: 188px;
width: 188px;
top: 6px;
left: 16px;
}
.cards:hover .card{
width: 200px;
height: 200px;
}
.cards:hover .card:nth-child(1){
left: 60px;
transform:rotate(5deg);
}
.cards:hover .card:nth-child(2){
}
.cards:hover .card:nth-child(3){
left: -60px;
transform:rotate(-5deg);
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="cards">
<img class="card" alt=":)" src="http://placehold.it/200/933/fff&text=+" />
<img class="card" alt=":)" src="http://placehold.it/200/393/fff&text=+" />
<img class="card" alt=":)" src="http://placehold.it/200/339/fff&text=+" />
</div>
<div class="cards">
<img class="card" alt=":)" src="http://placehold.it/200/333/fff&text=+" />
<img class="card" alt=":)" src="http://placehold.it/200/666/fff&text=+" />
<img class="card" alt=":)" src="http://placehold.it/200/999/fff&text=+" />
</div>
<div class="cards">
<img class="card" alt=":)" src="http://placehold.it/200/00c/fff&text=+" />
<img class="card" alt=":)" src="http://placehold.it/200/c00/fff&text=+" />
<img class="card" alt=":)" src="http://placehold.it/200/0c0/fff&text=+" />
</div>
Raw
settings.json
{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment