QuinBlog

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>.

.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);
}

.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;
}

.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;
}

.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;
}