<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul id="imageCont">
<li class="normal"></li>
<li class="normal"></li>
<li class="normal"></li>
<li class="normal"></li>
<li class="normal"></li>
<li class="normal"></li>
<li class="normal"></li>
<li class="normal"></li>
<li class="normal"></li>
<li class="normal"></li>
</ul>
body {
background-color: #248;
}
ul, li{
margin: 0;
padding: 0;
list-style: none;
}
#imageCont{
width: 500px;
height: 200px;
margin: 5% auto;
position: relative;
top: 0;
left: 0;
}
#imageCont > li{
opacity: 1;
position: absolute;
height: 100px;
width: 100px;
/*change image here*/
background-image: url(http://fc09.deviantart.net/fs38/i/2008/328/4/f/Black_and_White_Winter_Scenery_by_rekokros.jpg);
background-size:500px 200px;
background-repeat:no-repeat;
-webkit-transition: all 1s;
transition: all 1s;
}
#imageCont > li:nth-child(-n+6){
top: 0;
background-position-y: 0;
}
#imageCont > li:nth-child(n+6){
top: 100px;
background-position-y: -100px;
}
#imageCont > li:nth-child(5n+1){
left: 0;
background-position-x: 0;
}
#imageCont > li:nth-child(5n+2){
left: 100px;
background-position-x: -100px;
}
#imageCont > li:nth-child(5n+3){
left: 200px;
background-position-x: -200px;
}
#imageCont > li:nth-child(5n+4){
left: 300px;
background-position-x: -300px;
}
#imageCont > li:nth-child(5n){
left: 400px;
background-position-x: -400px;
}
#imageCont > li.normal{
border-radius: 50%;
top: 50px;
left: 200px;
opacity: .8;
}
/* which tile is at top?*/
#imageCont > li.normal:nth-child(3){
z-index: 5;
box-shadow: 0px 0px 5px 1px #666;
}
#imageCont > li.normal:nth-child(3):after{
content: '+';
color: #000;
font-size: 50px;
font-weight: bold;
position: absolute;
top: 20px;
left: 0;
width: 100%;
text-align: center;
}
$(document).ready(function(){
var $imageBlocks = $('#imageCont > li');
$imageBlocks.hover(function(){
$imageBlocks.toggleClass('normal');
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.