Kumpulan Efek Hover Pada Gambar

Kumpulan Efek Hover Pada Gambar..
Tapi Maaf Saya Tidak Menyediakan Demonya

Cara Penerapannya :

• Masuk Blog
• Pilih Template > Edit HTML
• Cari Kode .post img & .post img:hover Replace Aja Kode Tersebut Dengan Kode Dibawah Ini
• Jika Tidak Ada .post img & .post img:hover Bisa Dipastein Diatas 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 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); }

Efek Gambar Berbayangan / Shadow

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

Efek Gambar Membesar + Miring

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

Posted by Unknown on - Rating: 5.0

Title : Kumpulan Efek Hover Pada Gambar
Description : Kumpulan Efek Hover Pada Gambar.. Tapi Maaf Saya Tidak Menyediakan Demonya Cara Penerapannya : Masuk Blog Pilih Template > Edit HT...

Share to

Facebook Google+ Twitter