Wuookeee.. langsung saja praktek sob !!
1. Login blogger
2. Pergi ke Edit HTML
3. Beri ceklist pada Expand Widget Templates
4. Cari kode CSS
.post img
dan .post img:hover
, bila ada kode tersebut ganti/replace dengan kode yang saya siapakan dibawah. Tapi bila tidak ada kode seperti diatas, tinggal paste'kan saja diatas kode ]]></b:skin>
DEMO : Arahkan mouse ke gambar dan lihat efeknya.
Dan berikut adalah KODE CSS beserta DEMO untuk efek gambar pada postingan blog :
.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); }
.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 { 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); }
.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{ 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); }
5. Bila sudah memilih salah satu efek gambar diatas, jangan lupa Save Template.
0 comments:
Posting Komentar
Jangan Lupa Komentarnya Ya !