Buat Efek Hover pada Gambar

Membuat efek pada gambar dengan terlihat lembut dan kreatif. Trik kode css33 patut sobat mencobanya, kelima efek hover gambar ini, bisa membuat gerak pada gambar posting blog sobat. Berikut 5 efek over gambar tersebut : Lihat DEMONYA DISINI

EFEK OPACITY & BORDER RADIUS KANAN ATAS 

Efek opacity merupakan efek transisi pada border kanan atas

  .post-body img{ border-radius: 2%; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .post-body img:hover{opacity:.8; border-top-right-radius:70px 20px; -webkit-border-top-right-radius:70px 20px; }

EFEK HOVER TOP & BORDER RADIUS KANAN BAWAH

Efek Top & Border merupakan efek gambar akan terangkat keatas dan bisa dijadikan pilihan
.post-body img{ border-radius: 2%; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .post-body img:hover{ position:relative; top: -10px; border-bottom-right-radius:70px 20px; }

EFEK GAMBAR MENGECIL
Efek gambar akan mengecil atau bisa juga disebut efek fade Out

.post-body img{ border-radius: 2%; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .post-body img:hover{ -webkit-transform: scale(0.4, 0.4); -moz-transform: scale(0.4, 0.4); -ms-transform: scale(0.4, 0.4); -o-transform: scale(0.4, 0.4); transform: scale(0.4, 0.4); }

EFEK MELINGKAR

Efek melingkar, dimana efek ini juga menggunakan transisi CSS3, cantik dipandang

.post-body img{ border-radius: 2%; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .post-body img:hover{ border-radius:50%; border: 4px solid #ECECEC; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -o-transition: all .3s ease; -ms-transition: all .3s ease; transition: all .3s ease;

EFEK ROTASI DAN BAYANGAN SHADOW
Efek gambar aini terlihat akan berotasi sekitar 45 derajat, dan terlihat muncul shadow

.post-body img{ border-radius: 2%; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .post-body img:hover{ transition: all 2s ease-in-out; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); z-index: 999; box-shadow: 8px -6px 5px rgba(50, 50, 50, 0.75); }


Cara membuat Efek Hover tersebut seperti berikut :
1. Masuk ke Dasboard bloger, lalu klik Template
2. Cari kode ]]></b:skin>

3. Pilih salah satu efek Hover gambar yang sobat sukai, lalu copy paste kode tersebut tepat diatas kode ]]></b:skin> tersebut.
4. Lalu Save Selanjutnya coba lihat hasilnya di blog sobat, keren kan...

Semoga bermanfaat..!!