اسلایدر عکس کشویی به صورت html5 و css3

اسلایدرکشویی بدون جاوااسکریپت

این اسلایدر کاملا با html5 و css3 ساخته شده و به هیچ عنوان java script و یا … به کار نرفته است . ضمنا این اسلایدر قابلیت درج توضیح مختصر برای هر عکس را دارا می باشد .

کدhtml

<div class="vms-sliding-gallery">


    <ul>


        <li><figure><img src="images/vms1.jpg" width="980" height="350" alt=""><figcaption>متن مورد نظر مربوط به عکس</figcaption></figure></li>


        <li><figure><img src="images/vms2.jpg" width="980" height="350" alt=""><figcaption>متن مورد نظر مربوط به عکس</figcaption></figure></li>


        <li><figure><img src="images/vms3.jpg" width="980" height="350" alt=""><figcaption>متن مورد نظر مربوط به عکس</figcaption></figure></li>


        <li><figure><img src="images/vms4.jpg" width="980" height="350" alt=""><figcaption>متن مورد نظر مربوط به عکس</figcaption></figure></li>


        <li><figure><img src="images/vms5.jpg" width="980" height="350" alt=""><figcaption>متن مورد نظر مربوط به عکس</figcaption></figure></li>


    </ul>


</div>

کدcss

.vms-sliding-gallery *{
margin:0;
padding:0;
border:none;
outline:none;
}
.vms-sliding-gallery{
width:980px;
height:350px;
overflow:hidden;
}
.vms-sliding-gallery ul{
width:100%;
height:100%;	
}
.vms-sliding-gallery ul li{
width:20%;
height:100%;
list-style-type:none;
float:left;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
-ms-transition:all 1s;
transition:all 1s;
position:relative;
}
.vms-sliding-gallery ul li img{
position:absolute;
z-index:1;
border-left:1px solid #fff;
}
.vms-sliding-gallery ul li figcaption{
position:absolute;
z-index:2;
bottom:5px;
left:5px;
width:80%;
height:30px;
background-color:rgba(0,0,0,0.7);
color:#fff;	
opacity:0;
text-align:center;
font-family:tahoma;
padding-top:5px;
transition:all 1s;
}
.vms-sliding-gallery ul li:hover figcaption{
opacity:1;
}	
.vms-sliding-gallery ul:hover li{
width:40px;
}
.vms-sliding-gallery ul li:hover{
width:820px;
}