1. توجه إلى التخطيط وأضف أداة HTML/JAVASCRIPT وضع بها الكود
<style>
.works{
position:relative;
display:block;
width:940px;
height:240px;
overflow:hidden;
margin:18px auto 18px;
}
.works .slide-works{
width:972px;
}
.works h2{
display: inline-block;
height: 20px;
font-family: JFR,"gesstolight" ,Arial, Helvetica, sans-serif;
font-size: 15px;
color: #FFFFFF;
font-weight: normal;
line-height: 20px;
padding-right: 15px;
border-right: 3px solid #e71a1f;
float: right;
background: #332F2F;
}
#nav-work{
position:absolute;
left:0; top:0;
z-index:999;
width:38px;
height:18px;
}
#nav-work #prev{ width:18px; height:18px; float:left; background:#f9f8f8 url(http://khadamatplus.com/wp-content/themes/alwan/img/nav.png) no-repeat scroll 0 0; }
#nav-work #prev:hover{ background:rgb(235, 235, 235) url(http://khadamatplus.com/wp-content/themes/alwan/img/nav.png) no-repeat scroll 0 0; }
#nav-work #next{ width:18px; height:18px; float:right; background:#f9f8f8 url(http://khadamatplus.com/wp-content/themes/alwan/img/nav.png) no-repeat scroll -19px 0; }
#nav-work #next:hover{ background:rgb(235, 235, 235) url(http://khadamatplus.com/wp-content/themes/alwan/img/nav.png) no-repeat scroll -19px 0; }
.list-works{
width:972px;
height:210px;
margin-top:45px;
}
.list-works .work{
position:relative;
display:block;
width:210px;
height:200px;
float:right;
margin-left:33px;
text-decoration:none;
}
.list-works .work .pic{
display: table-caption;
width:210px;
height:140px;
overflow:hidden;
background:#F9F8F8;
text-align:center;
vertical-align:middle;
}
.list-works .work .hover-pic{
position:absolute;
left:0; top:0;
z-index:99;
display: block;
width:210px;
height:140px;
overflow:hidden;
transition: all 0.5s ease-out;
}
.list-works a.work:hover .hover-pic{ background:url(http://khadamatplus.com/wp-content/themes/alwan/img/hover_work.png) center no-repeat, url(http://khadamatplus.com/wp-content/themes/alwan/img/b-work2.png);}
.list-works a.work:hover .detail-work{ background:#505050;}
.list-works a.work:hover .detail-work .titre-work{ color:#fff;}
.detail-work{
display:block;
width:200px;
height:50px;
padding:5px;
background: #FFFFFF;
margin-top:3px;
font-family:ges;
font-size:12px;
line-height:11px;
text-align:center;
transition: all 0.5s ease-out;
}
.detail-work .titre-work{
font-family:ges;
font-size:15px;
color:#575757;
font-weight:normal;
line-height:26px;
text-align:center;
transition: all 0.5s ease-out;
width: 100%;
display: table;
}
.works2 { display:none; width:748px;}
.works2 .list-works{width: 804px; }
.works2 .list-works .slide-works {width: 804px;}
.works2 .list-works .work{ margin-left:58px;}
</style>
<div class='works'>
<div id='nav-work'>
</div>
<div class='list-works' id='works'>
<div class='slide-works'>
<a class='work fancybox' href='#' title=' شارك وربح قالب خيالي '>
<span class='pic'>
<img alt='8' class='attachment-list-work wp-post-image' height='140' src='http://im43.gulfup.com/fEw5QB.jpg' width='210'/>
</span>
<span class='hover-pic'/>
<span class='detail-work'>
<span class='titre-work'>المسابقة الأولى </span>
شارك وربح قالب احترافي </span>
</a>
<a class='work fancybox' href='#' title='المفاجئة الكبرى ترقبوها قريبا'>
<span class='pic'>
<img alt='7' class='attachment-list-work wp-post-image' height='140' src='http://im74.gulfup.com/jVjpuf.jpg' width='210'/>
</span>
<span class='hover-pic'/>
<span class='detail-work'>
<span class='titre-work'> قريبا</span>
المفاجئة الكبرى </span>
</a>
<a class='work fancybox' href='#' title='قريبا'>
<span class='pic'>
<img alt='6' class='attachment-list-work wp-post-image' height='140' src='http://im79.gulfup.com/BDMi5f.jpg' width='210'/>
</span>
<span class='hover-pic'/>
<span class='detail-work'>
<span class='titre-work'>قريبا</span>
قيد التطوير </span>
</a>
<a class='work fancybox' href='#' title='قريبا'>
<span class='pic'>
<img alt='5' class='attachment-list-work wp-post-image' height='140' src='http://im79.gulfup.com/swdeNw.jpg' width='210'/>
</span>
<span class='hover-pic'/>
<span class='detail-work'>
<span class='titre-work'>قريبا</span>
قيد التطوير </span>
</a>
</div>
</div>
</div>