web design: Slider Image Keren

Slider Image Keren

Slider Image Keren

Pada pertemuan kali ini saya akan berbagi Slder Image dengan dengan tampilan yang sangat keren. dengan dropdown lain dari pada yang lain. kamu juga dapat melihat sendiri hasilnya setelah didowload atau lihat sendiri pada link Demo.juga dapat didowload pada link download. berikut ini saya jelaskan tag html dan cssnya :

Tag CSS nya

<style type="text/css">
.GRboximg{
       position:relative;
       width:300px;
       float:left; 
       height:225px;
       margin:5px 15px 5px 0;
       border:0 solid;
       background:#ddd;
       padding:10px;
       box-shadow:-1px -1px 2px #555, 4px 4px 4px #000;
       border:1px solid #999;
       border-radius:4px;
}
.GRboximg .gambar1,.GRboximg .gambar2,.GRboximg .gambar3,.GRboximg .gambar4,.GRboximg .gambar5,.GRboximg .gambar6,.GRboximg .gambar7{
       position:absolute;
       width:300px;
       height:225px;
       margin:0;
       border:2px solid #000;
       border-radius:6px;
       padding:0;
       right:8px;
       bottom:8px;
       transition:0.4s 0.3s;
       -o-transition:0.4s 0.3s;
       -moz-transition:0.4s 0.3s;
       -webkit-transition:0.4s 0.3s;
       -ms-transition:0.4s 0.3s;
       opacity:0.7;
       filter:alpha(opacity=70);
}
.GRboximg .gambar10{
       opacity:0.9;
       filter:alpha(opacity=90);
}
.GRboximg .gambar1:hover,.GRboximg .gambar2:hover,.GRboximg .gambar3:hover,.GRboximg .gambar4:hover,.GRboximg .gambar5:hover,.GRboximg .gambar6:hover,.GRboximg .gambar7:hover{
       z-index:5;
       box-shadow:0 0 10px #000;
       border:2px solid #eee;
       opacity:1.0;
       filter:alpha(opacity=100);
}
.GRboximg:hover .gambar2{
       transform:translate(50px,0px);
       -o-transform:translate(50px,0px);
       -moz-transform:translate(50px,0px);
       -webkit-transform:translate(50px,0px);
       -ms-transform:translate(50px,0px);
}
.GRboximg:hover .gambar3{
       transform:translate(100px,0px);
       -o-transform:translate(100px,0px);
       -moz-transform:translate(100px,0px);
       -webkit-transform:translate(100px,0px);
       -ms-transform:translate(100px,0px);
}
.GRboximg:hover .gambar4{
       transform:translate(150px,0px);
       -o-transform:translate(150px,0px);
       -moz-transform:translate(150px,0px);
       -webkit-transform:translate(150px,0px);
       -ms-transform:translate(150px,0px);
}
.GRboximg:hover .gambar5{
       transform:translate(200px,0px);
       -o-transform:translate(200px,0px);
       -moz-transform:translate(200px,0px);
       -webkit-transform:translate(200px,0px);
       -ms-transform:translate(200px,0px);
}
.GRboximg:hover .gambar6{
       transform:translate(250px,0px);
       -o-transform:translate(250px,0px);
       -moz-transform:translate(250px,0px);
       -webkit-transform:translate(250px,0px);
       -ms-transform:translate(250px,0px);
}
.GRboximg:hover .gambar7{
       transform:translate(300px,0px);
       -o-transform:translate(300px,0px);
       -moz-transform:translate(300px,0px);
       -webkit-transform:translate(300px,0px);
       -ms-transform:translate(300px,0px);
}
</style>

Tag HTML nya

<div class="GRboximg">
        <a rel="GRlightbox[mygallery]" href="">
            <img class="gambar1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsLVBCGv9cEzPVqTj-Y7lS3GknhFlfQv6zifHZIwr-BDlu5KIrsSrE_32waDVDtCpyAxoF0bACaPXDseWu5H41qFNBQrzvyzqgylyeWWy55xartFlWOTWbJJVYWzKZpgCVOHVvZZlMJCyO/s320/ichigo_Scool.jpg" alt="Slider Image Keren"></img>
        </a>
  <a rel="GRlightbox[mygallery]" href="">
            <img class="gambar2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxOpuOqYhJ_s2HUhEBJTXWTocPVexCTbp6OfScyUICwIvsOEg1BdRT9LJ85cMhO7LmpspoLfljz5Ek_B7TGuUO8MYPkDI31_BXu8tTBSoqy0zegCgy_Xm00i8x5T6FM5Muu-kJ-UGJJ_P7/s320/zangetsuunreleased.png" alt="Slider Image Keren"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="">
            <img class="gambar3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7ZF7ptiHeIJx4Hntm_j6PVi71vs-FjKixlhSjunBTfLPgczLxjFov_oBJUyRnzeSJlYc1K1VBma3I6LhlvMpFfW-vYzBcK3mtX-mJo4qjbtuEPmTnn4PLIw0V3V9S5lfHjDCbSjawQT3b/s320/ichigo_shikai.jpg" alt="Slider Image Keren"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="">
            <img class="gambar4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4C2ti3quQRkSLHNWp72vB_h3X8Ns8vdHEGsUGbXTuvWCowUt43CUuKWSGJwhZZawEsd039TPwqI983QRyv-hPFYxfKWZ9YxoNfnHtTw8SCnr99q9_f2QKnj_wISBwrwK6uhns1DL7sQQI/s320/Ichigo_Kurosaki_Bankai___color_by_XxDark_ValentinexX.jpg" alt="Slider Image Keren"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="">
            <img class="gambar5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1MAakSos0YgOeYpFc2o1ad2w6xXl2_Dp2vzbzqzgKo2zvRwHYTrs6R8cIxw1DqSrTO4FqAGgI6Qp9PiD25Z3dfbgBhsA1-HkdcmDqXY5rq4kSGkhAjs84Zk8kADG3ryPVflbrPVjCSn3y/s320/Ichigo_Bankai_Vizard_-_Fan_Art.jpg" alt="Slider Image Keren"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="">
            <img class="gambar6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitIbEymJWex3iKgf2N_og-wQdGoleRpcxUj1nfZKdG9efhiUtAPWUlt9xQ421wQCku1jrrAqFVuRzHR4fkn-utujCFedYNdaAEje0cALPZXXGuvRsvTP8NaMLEkdIvza2U4rleOkgDJbrl/s320/ichigo_full_hollow_form_by_mortent230-d3dhaoj.jpg" alt="Slider Image Keren"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="">
            <img class="gambar7" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNzNEW6otkEdC1MWipirI7v1iQHUX-9G61ZZjzHGOXWjGeY3-CMHM42qIeX15edK-M2m3O-RrkmzGFSzlx_3cQd0Cl_JlUjqRClPixSmpNC-roUacbq5733hCd-SWC_5lBD2AamSI2JOC-/s320/__hope_____mugetsu_by_kirapl-d4lio6x.png" alt="Slider Image Keren"></img>
        </a>
        
    </div>

File nya dapat dilihat hasilnya dan dapat diunduh berikut ini :

Demo Unduh