web design: Slider Image Memutar

Slider Image Memutar

Slider Image dengan Tampilan Memutar

Dalam kali ini saya akan posting tentang Slider Image dengan yang keren yaitu dengan memutar gambar pada saat disentuh mouse dan akan tampil lebih fokus jika mouse berhenti pada salah satu gambar dari slider tersebut. untuk lebih jelasnya dapat kamu lihat sendiri pada berikut ini :

Tag CSS nya

<style type="text/css">
.GRboximg{
       position:relative;
       width:300px;
       float:left; /* original code by: http://gubhugreyot.blogspot.com */ 
       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,.GRboximg .gambar8,.GRboximg .gambar9,.GRboximg .gambar10{
       position:absolute;
       width:300px;
       height:225px;
       margin:0;
       border:2px solid #000;
       border-radius:6px;
       padding:0; /* original code by: http://gubhugreyot.blogdetik.com */ 
       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,.GRboximg .gambar8:hover,.GRboximg .gambar9:hover,.GRboximg .gambar10:hover{
       z-index:5;
       box-shadow:0 0 10px #000;
       border:2px solid #eee;
       opacity:1.0; /* original code by: http://lightbox-demo-tutorial.blogspot.com */ 
       filter:alpha(opacity=100);
}
.GRboximg:hover .gambar2{
       transform:translate(30px,0px);
       -o-transform:translate(30px,0px);
       -moz-transform:translate(30px,0px);
       -webkit-transform:translate(30px,0px);
       -ms-transform:translate(30px,0px);
}
.GRboximg:hover .gambar3{
       transform:translate(60px,0px);
       -o-transform:translate(60px,0px);
       -moz-transform:translate(60px,0px);
       -webkit-transform:translate(60px,0px);
       -ms-transform:translate(60px,0px);
}
.GRboximg:hover .gambar4{
       transform:translate(90px,0px);
       -o-transform:translate(90px,0px);
       -moz-transform:translate(90px,0px);
       -webkit-transform:translate(90px,0px);
       -ms-transform:translate(90px,0px);
}
.GRboximg:hover .gambar5{
       transform:translate(120px,0px);
       -o-transform:translate(120px,0px);
       -moz-transform:translate(120px,0px);
       -webkit-transform:translate(120px,0px);
       -ms-transform:translate(120px,0px);
}
.GRboximg:hover .gambar6{
       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 .gambar7{
       transform:translate(180px,0px);
       -o-transform:translate(180px,0px);
       -moz-transform:translate(180px,0px);
       -webkit-transform:translate(180px,0px);
       -ms-transform:translate(180px,0px);
}
.GRboximg:hover .gambar8{
       transform:translate(210px,0px);
       -o-transform:translate(210px,0px);
       -moz-transform:translate(210px,0px);
       -webkit-transform:translate(210px,0px);
       -ms-transform:translate(210px,0px);
}
.GRboximg:hover .gambar9{
       transform:translate(240px,0px) rotate(720deg);
       -o-transform:translate(240px,0px) rotate(720deg);
       -moz-transform:translate(240px,0px) rotate(720deg);
       -webkit-transform:translate(240px,0px) rotate(720deg);
       -ms-transform:translate(240px,0px) rotate(720deg);
}
.GRboximg:hover .gambar10{
       transform:translate(270px,0) rotate(360deg);
       -o-transform:translate(270px,0) rotate(360deg);
       -moz-transform:translate(270px,0) rotate(360deg);
       -webkit-transform:rotate(270px,0) translate(-42px,-262px);
       -ms-transform:translate(270px,0) rotate(360deg);
}</style>

Tag HTML nya

<div class="GRboximg">
        <a rel="GRlightbox[mygallery]" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijUM1hr1bMw-WoVUXWEQtvKb0Iv-mLI1taOQ3DljNe3oHoCaDLHPFCAf4PXgsnSR9oJlejByRwQmg25VYNFPdG0EJ8qszvfZRFSYeTVrE-xz_7n1MyBMVpoHN73EA0xw4usAU6aiA4I-s/s1600/img_gubhugreyot-tiger-02.jpg" title="Slider Image Memutar">
            <img class="gambar1" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO-vBLg3Rbzd1sBhRqmUxOGzeenJZHU2mgyM_8kQWUAvVVc_rgamX_owg9IoD05F16Utz4eByoVF2B_fS_Zn_lZqlQSCHcJVRrIZ-Bxl0LqM3K9BhKeWg3iBf4wnL09XK-YqYJ-MwkeZM/s320/th_gubhugreyot-tiger-02.jpg" alt="Slider Image Memutar"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhswsbAxcIjetsCioxFqIDjJxvTwvXsMut7iYyX6wjFXTLEri0BmFwvXfjygHXg2gTuJ5Y2zEQ1Th6BzFw55w0dmn09om41fDLmlLvPIklm7sihA5yoBt8ID26IzJ3D0qK0biblwIoQTnM/s1600/img_gubhugreyot-house2.jpg" title="Slider Image Memutar">
            <img class="gambar2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfGNMbNrbm-SgRNKFEUKakMghYaerPlYJdDA_wN3_3OzsiUlT32DBM8fzoO-gUjWwBXOJzjVclIdIzYWH7FhsZyyye0Jg-gzXjpvRbyAgNLcB4qH6S7_4TnaYYYIUMnz7vmQHOVVKlELE/s320/th_gubhugreyot-house2.jpg" alt="Slider Image Memutar"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaHsS2YDWDlvZCk5RHjGSXuIxmoNmcFsIf2mQ_nJiw56Kp_AwsPDXpneX-bUaqVBPlal3VNS8Zyhf5O50TFFAfnVAqCz7V48RhyMqPzelKBtWKN9kP1n4FwZex4WrGOZbJirErcZfPZj4/s1600/img_gubhugreyot-kuda-laut.jpg" title="Slider Image Memutar">
            <img class="gambar3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaqY1LeRuq-ysE9a9YEkWXjE4TXW6ByDvzlYviy4Gy8uWy66BXahQ4HoQxpX_jEuYETkTXoEPm3_oUejiVnEV-pvpWGT2IcLc2agvZdXPElnDalsGxjSjYb9m_5DfyeEJsHW0sU68s4K4/s320/th_gubhugreyot-kuda-laut.jpg" alt="Slider Image Memutar"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnOiynmU5BXlXqqldB54nVg4j2KATw2dTM4Tgd60YWeAgaU0Q1WzLaPDPeBm1XuNNqQoQhJ_gJc7kcFBkyrKpbR4qbyqNtFYJyercFwHDro3mbU8ZrNiXfhkkUSrSWEVGg6W1WsLa_W7A/s1600/img_gubhugreyot-macan-ciblon.jpg" title="Slider Image Memutar">
            <img class="gambar4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZNkMAgXM7Yk34RuLdD-wBgzdBIWzjqkgHkFQYP3T-spV3SpIflkDzaPQytkrF5Frgw1r0aDUsAfrBE-7MLwVKJWZuXreO4t9jZ0tdWSG4kDJv9FkcjxN-lBmZFS-6lWGe0EI9r9fOdlg/s320/th_gubhugreyot-macan-ciblon.jpg" alt="Slider Image Memutar"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFpqrcL4OG3UNJyLEJRcYuTjkCpX_S1_wgoEpQfsgH5fl0f1FjiKwalVP3DHCBlQMe7gYjS-cGvNbJvkRc4IRCtwaX4Q_P2D4qcgtCT4QLe6pSNbcYtUprJLwxtZq0BZ7J9tLLMQcuhQc/s1600/img_gubhugreyot-modern-house.jpg" title="Slider Image Memutar">
            <img class="gambar5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglFh7TkjkGK95T0ZNauVNh6he-CbGHuWXk4DKZboamcIcFe_24se3066HUtZl0t8k62NsZwTAdJirWM8kx43r8_3_qLV8ulH7Pm41q2mNzxHF-HGIZ4YH5Sw7sdwOYO946cU0b1bkBv0Y/s320/th_gubhugreyot-modern-house.jpg" alt="Slider Image Memutar"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnFkgLu7VLhJjaI_OO2VngPZ3MrisGChEHnnukcW1rhyqF1G15t2rMKwimE-d4scn0oD7JsUbKSNrqo6sW2rzwD3Ovd3xhoZdckQYETLIJ11D-bcpeb9i4PQfyKLYHCKGNmvFgJEnMu-g/s1600/img_gubhugreyot-crazy-house.jpg" title="Slider Image Memutar">
            <img class="gambar6" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1HyqUM_zGgx06zg1OLzXkT2UyuEeyRNkuB14Sn3BYOXiX-9Fqk4jkgIiKEm7cxlIy4mRDFz0QWL9TcWbxUyzlEArfkCQOxWZL3sBhWz0XhMB5nn1e1Bq2SnjR1LF4rGTTpm2PqjIFmco/s320/th_gubhugreyot-crazy-house.jpg" alt="Slider Image Memutar"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYRHzEc8b9qN6hcZ9Q7huF-_AQFLYa-JHY8ux-uLfBBBU0tPvrXm1DVvJM8Ek3xH5XMPYilaF16wlmShZYJg0JfMPEOxi5nzo8xYij6vaD0kXj96B274RFJuQK2dNghCJngQDtYFlnY94/s1600/img_gubhugreyot-rajawali.jpg" title="Slider Image Memutar">
            <img class="gambar7" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ4yqtIt3vwjzDW__8lVhc_wIc4ekQWeQv4giyg7ISVowgelcS-c0JRYi6McrwdLcifaUGDhworW4_oAeI-Ls2Ml2d12iVJ4py8KWinKNFiDz4ggSBLtw8k6Fy_xOr-2jUxK7W9Cmu1NY/s320/th_gubhugreyot-rajawali.jpg" alt="Slider Image Memutar"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFyI7CbVcOlWmBjc5ttUOguAA-evzMUmhWQWeOsy6yHu_HClqPlJyugBsTodLhxqeXp-afy-BG1AWx-rUiWnd0vaiMriTEOEH-46dSqYrwWriXVHcrDbWrddRPfYLb_d-V0i2EPP1K4u8/s1600/img_gubhugreyot-cleopatra.jpg" title="Slider Image Memutar">
            <img class="gambar8" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirdgO5wiJeNR66eRYxM7rELVQ5A6Hz0YTLijR1JkSFL9CHfYHySa7AkZhDZJrAF36-QglUyiohbq5zf84RG5gxlYkk5sGDLNHFm_yJOBle59Gz6zxDRt7EWoc8S9DRG_Y3fweA4wR8ZxA/s320/th_gubhugreyot-cleopatra.jpg" alt="Slider Image Memutar"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8oMk5_pZ0G2O7ig-UIpV13Qy5fUxLMIcLgKPaw3jzANEum1UxiDAZNmD9ObLI8KFwphBvWwWk64Ekls5073jqcRcYpa9JkU0isiygIpd_aLXmvm2TpRBlFEUJhvmblkrnYrUoCt2x_nw/s1600/img_gubhugreyot-clock.jpg" title="Slider Image Memutar">
            <img class="gambar9" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTDOMB4B68VSNj0SOth6dDm4PBNiqFqT8CfMVNCM_E6mp09swnmVmo19UJcpRDA8HdksStrhnd-wBt4vbHjwBKBTnZNCE8pScKQsmHJBTokS2Ms_fuaoX26pBoC8SI22WgOpU54_b1zl4/s320/th_gubhugreyot-clock.jpg" alt="Slider Image Memutar"></img>
        </a>
        <a rel="GRlightbox[mygallery]" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiboelXJ7rRZ_ewfwR6iGnXCdcc7bBMkaugsfQgdtf6ZrGCwjXxnCpEQDp8-5i3jBVL_CAVKedZ8-tCqgbbI-I3jYkaU6VriPSng6BBgdVVLBFwGEdvlTcBl7cgvz9utNZ63sk-Uhm4aTE/s1600/img_gubhugreyot_gadisku-06.jpg" title="Slider Image Memutar">
            <img class="gambar10" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRsnW_AGZBrumXhoPPcKtlrsv5JMz5B8z1_Jtc8h3eJILYPhR3OEJnTEoErqj02WF3hLnYYgBco4-daEPkkP4zCPV7k5Lsg70CoXwwQS0whGPT5XKmGroq_uVgVUEgr3SWr-pQIzBAYvc/s240/bg-slideshow-css3.jpg" alt="Slider Image Memutar"></img>
        </a>
    </div>

File nya dapat dilihat hasilnya dan dapat diunduh berikut ini :

Demo Unduh