<style type="text/css">
.menuHolder {width:750px; height:269px; background:#181818; text-align:center; padding-top:139px;}
ul.slide {padding:0; margin:0; list-style:none; position:relative; z-index:100;}
ul.slide li {height:120px; width:120px; position:relative; z-index:10; display:inline-block;
-moz-transition:  0.2s linear;
-o-transition: 0.2s linear;
-webkit-transition: 0.2s linear;
transition: 0.2s linear;
}
ul.slide li {*display:inline;}
ul.slide li a {display:block; width:120px; height:70px; padding-top:50px; color:#bbb; font:normal 11px/18px arial, sans-serif; 
text-decoration:none; background:#333;
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
}
ul.slide li a b {display:block; width:120px; height:18px; background:#666; border-top:1px solid #888; 
border-bottom:1px solid #444; cursor:pointer;}
ul.slide li img {display:block; width:120px; height:120px; background:red; position:relative; z-index:-1; top:0;
-moz-transition:  0.2s linear;
-o-transition: 0.2s linear;
-webkit-transition: 0.2s linear;
transition: 0.2s linear;
}
ul.slide li img.p1 {margin-top:-120px;}
ul.slide li img.p2 {margin-top:-120px;}
ul.slide li img.p3 {margin-top:-120px;}
ul.slide li img.p4 {margin-top:-120px;}
ul.slide li:hover {margin:0 120px;}
ul.slide li a:hover {direction:ltr;}
ul.slide li a:hover {background-color:#c60;}
ul.slide li a:hover b {background-color:#e93; color:#fff; border-top:1px solid #fa4; border-bottom:1px solid #a40;}
ul.slide li a:hover ~ .p1 {top:-120px;}
ul.slide li a:hover ~ .p2 {top:120px;}
ul.slide li a:hover ~ .p3 {margin-left:-120px;}
ul.slide li a:hover ~ .p4 {margin-left:120px;}
ul.slide li a:hover ~ .p3 {*margin-left:-240px;}
</style>
<br><br>
<div class ="menuHolder">
<ul class ="slide">
<li><a href="#url"><b>SERVICES</b></a><img class ="p1" src="pic1.png" alt=""><img class ="p2" src="pic2.png" alt="">
<img class ="p3" src="pic3.png" alt=""><img class ="p4" src="pic4.png" alt=""></li><li><a href="#url"><b>GALLERY</b></a>
<img class ="p1" src="pic2.png" alt=""><img class ="p2" src="pic3.png" alt=""><img class ="p3" src="pic4.png" alt="">
<img class ="p4" src="pic1.png" alt=""></li><li><a href="#url"><b>FASHION</b></a><img class ="p1" src="pic3.png" alt="">
<img class ="p2" src="pic4.png" alt=""><img class ="p3" src="pic1.png" alt=""><img class ="p4" src="pic2.png" alt=""></li><li>
<a href="#url"><b>CONTACT</b></a><img class ="p1" src="pic4.png" alt=""><img class ="p2" src="pic1.png" alt="">
<img class ="p3" src="pic2.png" alt=""><img class ="p4" src="pic3.png" alt=""></li>
</ul></div>
<br><br><br><br>