kumpulan efek hover

Ada banyak cara menghias blog slah satunya yaitu membuat Efek Hover/saat disorot mouse pada link atau gambar, dengan efek hover ini tentunya akan menjadikan blog kita lebih hidup dan akan membuat para pengunjung blog kita jadi betah berlama-lama berada di blog kita. namun jangan salah diantara efek-efek tersebut tentu diantaranya dapat membuat terganggunya pandangan terhadap tulisan-tulisan kita terutama pada efek gambar.
pada kesempatan ini saya akan memberikan trick agar beberapa gambar mempunyai efek yang otomatis jika kursor diarahkan ke gambar tanpa harus repot2 mengklik.....
lumayan buat memperindah blog kalian....hee
oke langsung saja :


sebelumnya ini langkah-langkahnya :

• Masuk ke akun blogger kalian
• Pada menu Drop Down, klik template.
• Backup terlebih dahulu template kalian.
• Klik Edit HTML dan klik Proceed.
• Gunakan CTRL + F untuk mencari kode ]]></b:skin>
• Kalau sudah ketemu, Copy Paste kode berikut tepat di atas kode ]]></b:skin>

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

...:: efek shadow atau gambar ber 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);
}

...:: efek gambar membesar (zooming) ::...

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

...:: efek gambar berputar ::...

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

• Simpan template kalian.

sekian dan terima kasih sudah berkunjung di blog saya

Semoga Bermanfaat

Posted in BLOG TIPS