1 .نتوجه لقالب >> تحرير
2.ابحث بإستعمال CTRL+F عن <head> ثم ضع الكود التالي فوقه
<script src='https://ar1web-com.googlecode.com/svn/trunk/slide-img.js'/>
التأثير الأول
/* www.ar1web.com */
.grid {
padding: 0;
margin: 0 auto;
list-style: none;
text-align: center;
overflow: hidden;
}
.grid li {
display: inline-block;
width: 300px;
margin: 0 0 10px 10px;
text-align: left;
position: relative;
background: #FFF;
padding: 10px;
box-shadow: 0 0 3px #C9C6C6;
}
.grid figure {
margin: 0;
position: relative;
}
.grid figure img {
width: 100%;
display: block;
position: relative;
}
.grid figcaption {
position: absolute;
top: 0;
left: 0px;
padding: 10px;
background: #1F4977;
color: #fff;
}
.grid figcaption h3 {
margin: 20px 0 0;
padding: 0;
color: #FFF;
font: normal 17px ges,tahoma;
text-align: center;
display: block;
}
.cs-style-4 figcaption a:hover {
background: #fff;
color: #ED4E6E;
}
.grid figcaption a {
text-align: center;
padding: 11px 10px;
border-radius: 2px;
display: inline-block;
background: #ed4e6e;
color: #fff;
}
.cs-style-4 li {
perspective: 1700px;
perspective-origin: 0 50%;
}
.cs-style-4 figure {
transform-style: preserve-3d;
}
.cs-style-4 figure > div {
overflow: hidden;
}
.cs-style-4 figure img {
transition: transform 0.4s;
}
.no-touch .cs-style-4 figure:hover img,
.cs-style-4 figure.cs-hover img {
transform: translateX(25%);
}
.cs-style-4 figcaption {
height: 88.5%;
width: 50%;
opacity: 0;
backface-visibility: hidden;
transform-origin: 0 0;
transform: rotateY(-90deg);
transition: transform 0.4s, opacity 0.1s 0.3s;
}
.no-touch .cs-style-4 figure:hover figcaption,
.cs-style-4 figure.cs-hover figcaption {
opacity: 1;
transform: rotateY(0deg);
transition: transform 0.4s, opacity 0.1s;
}
.cs-style-4 figcaption a {
position: absolute;
bottom: 20px;
right: 20px;
}
التأثير الثاني
/* www.ar1web.com */
.grid {
padding: 0;
margin: 0 auto;
list-style: none;
text-align: center;
overflow: hidden;
}
.grid li {
display: inline-block;
width: 300px;
margin: 0 0 10px 10px;
text-align: right;
position: relative;
background: #FFF;
padding: 10px;
box-shadow: 0 0 3px #C9C6C6;
}
.grid figure {
margin: 0;
position: relative;
}
.grid figure img {
width: 100%;
display: block;
position: relative;
}
.grid figcaption {
position: absolute;
top: 0;
right: 0;
padding: 10px;
background: #1F4977;
color: #33F55B;
}
.grid figcaption h3 {
margin: 20px 0 0;
padding: 0;
color: #FFF;
font: normal 17px ges,tahoma;
text-align: center;
display: block;
}
.grid figcaption span:before {
content: '$';
}
.grid figcaption a {
text-align: center;
padding: 11px 10px;
border-radius: 2px;
display: inline-block;
background: #ed4e6e;
color: #fff;
}
/* www.ar1web.com */
.cs-style-3 figure {
overflow: hidden;
}
.cs-style-3 figure img {
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
.no-touch .cs-style-3 figure:hover img, .cs-style-3 figure.cs-hover img {
-webkit-transform: translateY(-130px);
-moz-transform: translateY(-130px);
-ms-transform: translateY(-130px);
transform: translateY(-130px);
}
.cs-style-3 figcaption {
width: 93.3%;
top: auto;
height: 92%;
bottom: 0;
opacity: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
.no-touch .cs-style-3 figure:hover figcaption, .cs-style-3 figure.cs-hover figcaption {
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
.cs-style-3 figcaption a {
position: absolute;
bottom: 45px;
left: 75px;
border-radius: 3px;
}
figcaption span {
font: normal 16px tahoma;
position: relative;
padding: 0 21px 0;
top: 0;
}
.cs-style-3 figcaption a:hover {
background:#fff;
color:#ED4E6E;
}
التأثير الأول
<ul class='grid cs-style-4'>
<li>
<figure>
<div><img alt='img04' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilU-tv1s4Lk_nRSB62AlJJxjBX4tNdycmch3APwXUr5hiEXyEUJ2uouTev55eoLqBL5yEOMRYWmz6-tbyzI3GN8NQv8KHdGGor5j5CfeXw2flg0GOxNinMvh75qlUjwbJBKlfR0RSulq4/s1600/finish.jpg'/></div>
<figcaption>
<h3>قريبا</h3>
<span>Soon</span>
<a href='/'>ألقي نظرة</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<div><img alt='img04' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilU-tv1s4Lk_nRSB62AlJJxjBX4tNdycmch3APwXUr5hiEXyEUJ2uouTev55eoLqBL5yEOMRYWmz6-tbyzI3GN8NQv8KHdGGor5j5CfeXw2flg0GOxNinMvh75qlUjwbJBKlfR0RSulq4/s1600/finish.jpg'/></div>
<figcaption>
<h3>قريبا</h3>
<span>SooN</span>
<a href='/'>ألقي نظرة</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<div><img alt='img04' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilU-tv1s4Lk_nRSB62AlJJxjBX4tNdycmch3APwXUr5hiEXyEUJ2uouTev55eoLqBL5yEOMRYWmz6-tbyzI3GN8NQv8KHdGGor5j5CfeXw2flg0GOxNinMvh75qlUjwbJBKlfR0RSulq4/s1600/finish.jpg'/></div>
<figcaption>
<h3>قريبا</h3>
<span>SooN</span>
<a href='/'>ألقي نظرة</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<div><img alt='img04' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilU-tv1s4Lk_nRSB62AlJJxjBX4tNdycmch3APwXUr5hiEXyEUJ2uouTev55eoLqBL5yEOMRYWmz6-tbyzI3GN8NQv8KHdGGor5j5CfeXw2flg0GOxNinMvh75qlUjwbJBKlfR0RSulq4/s1600/finish.jpg'/></div>
<figcaption>
<h3>قريبا</h3>
<span>SooN</span>
<a href='/'>ألقي نظرة</a>
</figcaption>
</figure>
</li>
</ul>
التأثير الثاني
<ul class='grid cs-style-3'>
<li>
<figure>
<img alt='img04' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkdSdyXuwnBwPdkB2xcVW_fnt9_9IUQIa3zA1GYV4WSzYdc_UbkosJxRcgOyUSbabjQ2SyJ41MVhBcX-C9nFzsdZvO_6QSOBskML6sl5Wj9TZWcrXbBK1fg6n7IWj-TjvtHXiBdpYTsF0F/s1600/1.png'/>
<figcaption>
<h3>
تحويل صورتك الشخصية إلى كرتون
</h3>
<span>
10
</span>
<a href='www.ar1web.com' target='_blank'>
طلب الخدمة
</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img alt='img01' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr3qqUIlLjTFdxNDUinJDNd6-NCMG227reiYq4MCgRzuFoQPDt5ZpB4SU2RJDoueAwM9vVSaR-6zHPBRO43PuQm7NhBuAytlEg9Qb7qM83n60xnycOg3TLeDRVHsv_UGScbkFqcBBM_wtS/s1600/2.png'/>
<figcaption>
<h3>
تصميم احترافي لصورتك الشخصية
</h3>
<span>
5
</span>
<a href='www.ar1web.com' target='_blank'>
طلب الخدمة
</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img alt='img02' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXDlqdj4e149yrsVFDiD5-fxKf8BnbTa_2_Yf8DyLQdMlJQkkB9O-fqh9UYR6bHlKd2ov3J2zDr1VCZx9IiiK8vThLdjtHmr0d06PnNGG2EE4e5ffnSyJDznuIUkwLXO6HtkjgH9Q1mAv1/s1600/3.png'/>
<figcaption>
<h3>
تصميم صور احترفية لعرض خدماتك في خمسات
</h3>
<span>
5
</span>
<a href='www.ar1web.com' target='_blank'>
طلب الخدمة
</a>
</figcaption>
</figure>
</li>
<li>
<figure>
<img alt='img05' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpfiAQrSBbqffIGxj4WcP7OQ6KtNDihLiRY-fBeOyFtp9TP85wOb-zXAP75xqkAkOsQ0lqFOWdblObb4h30o7UVlOadk3ERRollpdbgU5S_6S4IhvLxre0lS9p6wW54cTot6NsU0p5raFc/s1600/1.png'/>
<figcaption>
<h3>
واجهة "معرض حسام"
</h3>
<span>
5
</span>
<a href='www.ar1web.com' target='_blank'>
طلب الخدمة
</a>
</figcaption>
</figure>
</li>
</ul>