April 18, 2013

Cara Membuat Effect Gambar Berputar Saat Hover

Posted by Blogger Name. Category: ,


Hay BenkKerss | Judul postingan kali ini adalah cara membuat effet berputar pada gambar saat hover berputar saat gambar di sentuh pointer,effect gambar berputar pada postingan,effect gambar berputar saat hover dengan mouse.Sebenarnya cara ini sangat banyak terdapat di blog sahabat lainnya tapi kali ini saya hanya ingin sharing lagi untuk para blogger newbe seperti saya ini.
Sebagian template blogger sudah memiliki fasilitas atau effect seperti ini tapi bagaimana dengan template blogger yang belum memilikinya sedangkan para blogger newbe seperti saya ingin memilikinya,karena menurut saya ini dapat menjadi daya tarik tersendiri.
Judul postingan saya yaitu cara membuat effect berputar pada gambar saat hover tapi tidak hanya itu saja yang saya akan sharing,masih ada yang lainnya :

effect gambar bergoyang
  • effect gambar membesar atau effect zoom
  • effect gambar berputar dan membesar
  • effect gambar memiliki bayangan
  • effect gambar berubah bentuk
  • Pertama login dulu ke blogger dan menuju "Edit HTML" kemudian cari kode ]]></b:skin> dan copas kode dibawah tepat diatas kode ]]></b:skin> !
  • effect gambar berputar

  • .post img {
    border:1px solid #ffff01;
    margin:3px;
    max-width:570px;
    padding:3px
    box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    -o-border-radius:0;
    -moz-transition:all .8s ease-in-out;
    -ms-transition:all .8s ease-in-out;
    -o-transition:all .8s ease-in-out;
    -webkit-transition:all .8s ease-in-out;
    transition:all .8s ease-in-out;
    }

    .post img:hover {
    border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    -o-border-radius: 10px 10px 10px 10px;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);

    }
    • effect gambar berputar dan membesar
    .post img{
    transition:all 1.2s ease-out;
    -o-transition:all 1.2s ease-out;
    -moz-transition:all 1.2s ease-out;
    -webkit-transition:all 1.2s ease-out;
    }
    .post img:hover {
    z-index:99;
    transform:rotate(-10deg) scale(1.4) translate(5px,-3px);
    -o-transform:rotate(-10deg) scale(1.4) translate(5px,-3px);
    -moz-transform:rotate(360deg) scale(2) translate(1px,-3px);
    -webkit-transform:rotate(30deg) scale(2) translate(10px,-3px);
    box-shadow: 0 3px 6px rgba(0,0,0,.5);
    }
    • effect gambar bergoyang

    .post img {
    box-shadow: 0 3px 6px rgba(0,0,0,.25);
    transform: rotate(+2deg);
    -o-transform: rotate(+2deg);
    -webkit-transform: rotate(+2deg);
    -moz-transform: rotate(+2deg);
    }
    .post img:hover {
    box-shadow: 0 3px 6px rgba(0,0,0,.5);
    transform: rotate(-1deg);
    -webkit-transform: rotate(-1deg);
    -o-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    }
    • effect gambar membesar atau zoom
    .post img {
    height:auto;
    transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    }
    .post img:hover {
    transition: all 0.3s;
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
    }
    • effect gambar memiliki bayangan

    .post img {
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    }
    .post img:hover {
    box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
    }
    • effect gambar berubah bentuk
    .post img {
    border-radius: 30px 0 30px 0;
    -moz-border-radius: 30px 0 30px 0;
    -webkit-border-radius: 30px 0 30px 0;
    -o-border-radius: 30px 0 30px 0;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    }
    .post img:hover {
    box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    -o-border-radius:0;
    }

    Itu semua kode CSS nya dan bisa kalian edit sendiri sesuai dengan template blogger masing-masing.
    Sekian dulu pertemuan hari ini dan selamat mencoba.

    1 komentar:

    nurdiansyah caemz said...

    tankz maz br0w....
    kunjungi juga blog q eah...
    http://nurdiansyahcaemz.blogspot.com/

    Post a Comment

    Silahkan berkomentar yang sopan, dilarang nyepam, dilarang rusuh, dilarang ngejunk, no live link !

    ◄ Posting Baru Posting Lama ►