<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
input[type="checkbox"]{position:absolute;z-index:5; display:none;}
ul,li{list-style:none;padding:0;margin:0;}
.flipping-cards li{
position:relative;
float:left;
margin-right:10px;
}
.flipping-cards label{
display:block;
width:200px;
height:250px;
cursor:pointer;
}
.flipping-cards .wrapper{
display:block;
width:200px;
height:250px;
}
.flipping-cards .wrapper span{
display:block;
width:200px;
height:250px;
position:absolute;
top:0;
left:0;
}
.flipping-cards label .back{
border-radius:10px;
background-color:gray;
}
.flipping-cards label .image{
display:none;
}
.flipping-cards input[type="checkbox"]:checked + label .image{
display:block;
position:absolute;
right:0;
left:0;
z-index:2;
}
label[for="item1"] .image{background-image:url(http://farm6.staticflickr.com/5339/8879221754_51e07afc5e_o.png);}
label[for="item2"] .image{background-image:url(http://farm8.staticflickr.com/7398/8878601839_e5a56dc65f_o.png);}
label[for="item3"] .image{background-image:url(http://farm6.staticflickr.com/5461/8879221878_b22fdf9ff8_o.png);}
label[for="item4"] .image{background-image:url(http://farm8.staticflickr.com/7458/8878601681_b8c0499874_o.png);}
</style>
</head>
<body>
<ul class="flipping-cards">
<li>
<input type="checkbox" id="item1">
<label for="item1">
<span class="wrapper">
<span class="image"></span>
<span class="back"></span>
</span>
</label>
</li>
<li>
<input type="checkbox" id="item2">
<label for="item2">
<span class="wrapper">
<span class="image"></span>
<span class="back"></span>
</span>
</label>
</li>
<li>
<input type="checkbox" id="item3">
<label for="item3">
<span class="wrapper">
<span class="image"></span>
<span class="back"></span>
</span>
</label>
</li>
<li>
<input type="checkbox" id="item4">
<label for="item4">
<span class="wrapper">
<span class="image"></span>
<span class="back"></span>
</span>
</label>
</li>
</ul>
</body>
</html>
