Skip to content

Instantly share code, notes, and snippets.

/index.html

Created December 25, 2012 12:41
Show Gist options
  • Save anonymous/4372990 to your computer and use it in GitHub Desktop.
Save anonymous/4372990 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Burak Can. CSS-Only Image Stack With :checked
Raw
index.html
<body>
<div id="container">
<input type="checkbox" id="checkbox" name="checkbox">
<label for="checkbox">
<div id="plus">+</div>
<div class="image" id="one"></div>
<div class="image" id="two"></div>
<div class="image" id="three"></div>
<div class="image" id="four"></div>
<div class="image" id="five"></div>
</label>
</div>
</body>
Raw
style.css
body {
background: url('http://brkcan.net/fun/codepen/wood_texture.png');
}
#container {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
-webkit-perspective: 600;
}
#checkbox {
width: 38px;
height: 38px;
display:block;
opacity: 0;
z-index: 2;
position:absolute;
left: 0px;
bottom: 0px;
}
#plus {
width: 38px;
height: 38px;
background: #ff005a;
border-radius: 19px;
position:absolute;
left: 0px;
bottom: 0px;
z-index:5;
text-align:center;
line-height: 38px;
color: #fff;
font-size: 20px;
font-weight:bold;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.image {
width: 92px;
height: 92px;
background: #fff;
border: 4px solid #fff;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.29);
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.29);
position:absolute;
-webkit-transition: all 200ms ease-out;
transition: all 200ms ease-out;
z-index: 1;
}
.image#one {
-webkit-transform: translateY( 10px ) translateX( 20px ) rotateX( 60deg );
background: url('http://brkcan.net/fun/codepen/danbo1.jpg');
}
.image#two {
-webkit-transform: translateY( 6px ) translateX( 20px ) rotateX( 60deg );
background: url('http://brkcan.net/fun/codepen/danbo2.jpg');
}
.image#three {
-webkit-transform: translateY( 2px ) translateX( 20px ) rotateX( 60deg );
background: url('http://brkcan.net/fun/codepen/danbo3.jpg');
}
.image#four {
-webkit-transform: translateY( -2px ) translateX( 20px ) rotateX( 60deg );
background: url('http://brkcan.net/fun/codepen/danbo4.jpg');
}
.image#five {
-webkit-transform: translateY( -6px ) translateX( 20px ) rotateX( 60deg );
background: url('http://brkcan.net/fun/codepen/danbo5.jpg');
}
#checkbox:checked+label .image#one {
-webkit-transform: translateY( 220px ) translateX( 20px ) rotateX( 0deg );
background: url('http://brkcan.net/fun/codepen/danbo1.jpg');
}
#checkbox:checked+label .image#two {
-webkit-transform: translateY( 115px ) translateX( 20px ) rotateX( 0deg );
background: url('http://brkcan.net/fun/codepen/danbo2.jpg');
}
#checkbox:checked+label .image#three {
-webkit-transform: translateY( 10px ) translateX( 20px ) rotateX( 0deg );
background: url('http://brkcan.net/fun/codepen/danbo3.jpg');
}
#checkbox:checked+label .image#four {
-webkit-transform: translateY( -95px ) translateX( 20px ) rotateX( 0deg );
background: url('http://brkcan.net/fun/codepen/danbo4.jpg');
}
#checkbox:checked+label .image#five {
-webkit-transform: translateY( -200px ) translateX( 20px ) rotateX( 0deg );
background: url('http://brkcan.net/fun/codepen/danbo5.jpg');
}
#checkbox:checked+label #plus {
background: #000;
opacity: 0.5;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment