Memberikan Efek Hover Keren pada Gambar


Hover adalah efek atau perubahan yang terjadi apabila kursor kita mengarah pada suatu object (link/gambar). nah pada kesempatan kali ini saya akan membagikan cara bagaimana memberikan efek hover tersebut pada gambar yang ada pada Blog anda. dengan memberikan efek hover ini tentunya akan membuat tampilan pada Blog anda jadi terlihat lebih menarik. Langsung aja dah, jika kalian tertarik untuk memberikan efek pada setiap gambar yang ada di Blog anda, silakan ikuti tutorial yang ada dibawah,

Langkah-langkah,
  • Login ke akun Blog anda.
  • Pilih menu "Template".
  • Klik "Edit HTML".
  • Centang "Expand Template Widget".
  • Cari kode ]]></b:skin>.
  • Pilih salah satu kode berikut lalu letakkan diatas kode ]]></b:skin>.

Silahkan arahkan kursor pada gambar untuk melihat efeknya!


efek hover zoom

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


efek hover berubah bentuk

Kode untuk gambar diatas:
.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;
}


efek hover terang

Kode untuk efek diatas:
.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;
}


efek hover berputar

Kode untuk efek diatas:
.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;
}


efek hover zoom spin

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

  • Jika anda sudah menentukan pilihan efek yang akan anda gunakan, klik "Simpan".

Sekian tutorial kali ini, Semoga bermanfaat.

2 comments:

  1. thanks gan tutorialnya, udah ane praktekkin di blog ane.

    ReplyDelete
  2. thanks bro, udah ane pasang di http://id-jualbeli.blogspot.com
    kereeen

    ReplyDelete