Cara membuat peel back image / gambar terkelupas sebelum dan sesudah di blog

Peel back image selalu menyenangkan untuk dilihat, terutama jika efek transisi yang tepat digunakan untuk pertukaran gambar secara efektif antara keduanya. Contoh dari CSS ini menunjukan bagaimana fungsi dari CSS3 transisi seolah-olah animasi dari klip gambar seperti hidup. Hasilnya cukup simple, akan tetapi keren sekali.

View Demo

MENAMBAHKAN KODE CSS DI BLOG

• Masuk ke akun blogger anda -> Klik Drop down menu
• Kemudian klik Template -> Edit HTML

• Cari tag / kode ]]></b:skin> tekan CTRL + F  untuk memudahkan pencarian
• Selanjutnya pastekan kode CSS berikut tepat diatas kode  ]]></b:skin> 

a.nowandthen{ position:relative; display: block; overflow:hidden; cursor: pointer; width: 650px; /* set width of image container */ height: 434px; /* set height of image container */ } a.nowandthen img{ position:absolute; left:0; top:0; width: 100%; height: 100%; -moz-transition: all 0.5s ease; /* enable transition */ -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; z-index: 2; clip: rect(0,650px,434px,0); /* clip values should be rect(0,image_width,image_height,0) */ } a.nowandthen img:nth-of-type(2){ /* hide "after" image beneath "before" so it's initially out of view */ z-index: 1; } a.nowandthen:hover img:nth-of-type(1){ /* clip "before" image to reveal "after" */ clip: rect(0,0,434px,0); /* clip values should be rect(0,0,image_height,0) */ opacity: 0; } a.nowandthen.alt{ width: 300px; /* set width of image container */ height: 354px; /* set height of image container */ } a.nowandthen.alt img{ clip: rect(0,300px,354px,0); /* clip values should be rect(0,image_width,image_height,0) */ } a.nowandthen.alt:hover img:nth-of-type(1){ clip: rect(0,0,354px,0); /* clip values should be rect(0,0,image_height,0) */ }

• Simpan Template..

MENAMBAHKAN KODE HTML 

• Klik Tata letak -> Tambahkan gadget HTML/Javasript -> masukan kode didalamnya -> Simpan gadget.
• Atau Tambahkan kode HTML berikut didalam postingan (HTML bukan compose) 

<a class="nowandthen">
    <img src="http://img526.imageshack.us/img526/8063/beforejt.jpg" alt="">
    <img src="http://img52.imageshack.us/img52/75/afteruc.jpg" alt="">
</a>

<a class="nowandthen alt">
    <img src="http://img23.imageshack.us/img23/3189/before2f.jpg" alt="">
    <img src="http://img824.imageshack.us/img824/2466/after2g.jpg" alt="">
</a>

•  Ganti link direct dengan link gambar anda..

Semoga bermanfa'at... 

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 16.10