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"

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"

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"

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"

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"

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