Kumpulan Efek Gambar Pada Postingan Blog Dengan CSS3

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 {


5. Bila sudah memilih salah satu efek gambar diatas, jangan lupa Save Template.

Backlinks

URL

Code For Forum

HTML Code <a href='https://orochimaru-id.blogspot.com/2012/10/kumpulan-efek-gambar-pada-postingan.html' target='_blank'>Kumpulan Efek Gambar Pada Postingan Blog Dengan CSS3 </a>

Anda Sekarang Sedang Baca Artikel Tentang Kumpulan Efek Gambar Pada Postingan Blog Dengan CSS3 , Boleh Menyebar Luaskan Artikel Ini Atau Mengcopy Paste Artikel Kumpulan Efek Gambar Pada Postingan Blog Dengan CSS3 ini Jika Memang Berrmanfaat. Tapi Saya Harap Anda Jangan Lupa Menyertakan Link Kumpulan Efek Gambar Pada Postingan Blog Dengan CSS3 Sumbernya. Thank's

Rule For Leave A Comment

Hargai artikel ini dengan meninggalkan jejak berupa saran/komentar. Jejak anda akan membuat Author lebih bersemangat lagi untuk membuat artikel menarik lainnya, tapi sebelum kalian meninggalkan jejak kalian harus ikuti peraturannya :

1. Dilarang SPAM.

2. Berkomentarlah sesuai TOPIK.

3. Komentar yang keluar dari TOPIK akan Author DELETE.

4. Dilarang berkomentar yang berbau unsur SARA,PO*NO dan MENGHINA.