<p>Click a card to change its stacking order.</p>
<div class="button-wrap">
<div class="button green">Card 1</div>
<div class="button yellow">Card 2</div>
<div class="button blue">Card 3</div>
<div class="button violet">Card 4</div>
</div>
* {
transition:.25s ease-in-out;
}
p {
font-family:helvetica neue, helvetica, arial, sans-serif;
font-weight:200;
font-size:20px;
max-width:500px;
margin:100px auto 50px auto;
text-align:center;
color:#464646;
}
.button-wrap {
font-family:helvetica neue, helvetica, arial, sans-serif;
font-weight:200;
font-size:25px;
height:75px;
width:200px;
margin:50px auto;
position:relative;
&:hover {
.button {
&:nth-of-type(1){
transform:translate(-30px,-30px);
}
&:nth-of-type(2){
transform:translate(-10px,-10px);
}
&:nth-of-type(3){
transform:translate(10px,10px);
}
&:nth-of-type(4){
transform:translate(30px,30px);
}
}
}
.button {
height:100%;
width:100%;
line-height:75px;
text-align:center;
position:absolute;
box-shadow: 2px 2px 2px rgba(0,0,0,.2);
border-radius:3px;
&:hover {
cursor:pointer;
}
&.green {
background:#7fc77e;
color:#537a52;
&:hover {
background:#77e475;
}
}
&.yellow {
background:#eccc1d;
color:#887d40;
&:hover {
background:#ffe557;
}
}
&.blue {
background:#6dbde2;
color:#10678f;
&:hover {
background:#8edbff;
}
}
&.violet {
background:#b578ce;
color:#3d2049;
&:hover {
background:#de8eff;
}
}
&:first-of-type {
z-index:4;
}
&:nth-of-type(2) {
z-index:3;
left:5px;
top:5px;
}
&:nth-of-type(3) {
z-index:2;
left:10px;
top:10px;
}
&:nth-of-type(4) {
z-index:1;
left:15px;
top:15px;
box-shadow:none;
}
}
}
View Compiled
$('.button').click(function(){
var clickedButton = $(this);
this.remove();
$('.button-wrap').prepend(clickedButton);
});
This Pen doesn't use any external CSS resources.