Selasa, 28 Januari 2014

Efek Hover Pada Gambar


Efek Hover Pada Gambar
"Efek Hover Pada Gambar "

Hover adalah Perubahan yang terjadi saat Mouse menyentuh objek, biasa berbentuk link atau gambar. kegunaan memasang efek hover di website kita salah satunya supaya website kita lebih terkesan menarik, seolah objek yang diberi efek hover terlihat hidup dan lebih responsive!

Berikut cara memasang efek hover untuk gambar / <img>,
  • Login ke akun Blog anda.
  • Pilih menu "Template".
  • Klik "Edit HTML".
  • Cari kode ]]></b:skin>.
  • Pilih dan copy salah satu kode dibawah lalu paste diatas kode ]]></b:skin>.

Silahkan arahkan kursor pada gambar untuk melihat efeknya!


"Zoom Image Hover Image : Gambar Membesar"
 Zoom Image Hover Image : Gambar Membesar

Kode untuk efek Gambar Membesar:
.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);
}


"Curve to Normal Image Hover Effect : Gambar Melengkung menjadi Normal"
- Curve to Normal Image Hover Effect : Gambar Melengkung menjadi Normal


Kode untuk Gambar Melengkung menjadi Normal:
.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;
}


"Brightness Image Hover Effect : Gambar Menjadi Terang"
Brightness Image Hover Effect : Gambar Menjadi Terang


Kode untuk efek Gambar Menjadi Terang:
.post img {
    opacity:0.5;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity:0.5;
}
.post img:hover {
    opacity:1.0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    -moz-opacity:1.0;
    -khtml-opacity:1;
}


"Spin Image Hover Effect : Gambar Berputar"
Spin Image Hover Effect : Gambar Berputar


Kode untuk efek Gambar Berputar:
.post img {
    -webkit-transition: all 1200ms;
    -moz-transition: all 1200ms;
    -ms-transition: all 1200ms;
    -o-transition: all 1200ms;
    transition: all 1200ms;
}
.post img:hover {
    -moz-transform: scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -webkit-transform: scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -o-transform: scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -ms-transform: scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    transform: scale(1) rotate(360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -webkit-transition: all 1200ms ease-in-out;
    -moz-transition: all 1200ms ease-in-out;
    -ms-transition: all 1200ms ease-in-out;
    -o-transition: all 1200ms ease-in-out;
    transition: all 1200ms ease-in-out;
}


"Spin and Zoom Image Hover Effect : Gambar Berputar dan Membesar"
Spin and Zoom Image Hover Effect : Gambar Berputar dan Membesar


Kode untuk efek 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);
}


Sekian tutorial "Efek Hover Pada Gambar" ini, Semoga bermanfaat.


Posted by: dian_sunday
diansunday Updated at: 11.21

19 komentar :

  1. wah menarik sekali ya mas kalau gambar di blog ada efek hover nya, jadi ada variasinya :)

    BalasHapus
  2. kunjungan perdana gan.slm blogger oke

    BalasHapus
    Balasan
    1. salam blogger jg! mksh knjungan & komennya gan

      Hapus
  3. Keren gan :D maen ke blogku yah

    BalasHapus
  4. wah keren juga nih efek hover na, bisa dicoba nih :)

    BalasHapus
  5. keren kang.

    site :
    http://persib.yu.tl
    http://dendri.heck.in

    BalasHapus
  6. Nice post gan. Sama lagi test fitur komen xsun. :D

    BalasHapus
  7. Nice post gan. Sama lagi test fitur komen xsun. :D

    BalasHapus
  8. Mampir ke blog ku ya fokusunik.blogspot.com

    BalasHapus
  9. Bother minta bantuan bimbingannya buat olah blog saya
    Crowzerowan.blogspot.com

    BalasHapus

Mohon alamat blog dicantumkan untuk mempernudah Blogwalking!