Efek Gambar Peel Back Dengan CSS3

Efek Gambar Peel Back Dengan CSS3 – merupakan efek gambar dimana saat mouse menyentuh gambar akan menampilkan efek hover seperti slide out yang berjalan secara mulus untuk menampilkan gambar kedua yang berada dibelakangnya. Efek animasi CSS3 ini berjalan secara halus sehinga lebih jelas terlihat saat onmouseover gambar akan terkesan menjadi lebih cantik. Hasilnya adalah sederhana namun ramping "Sebelum dan Sesudah" efek hover gambar. Dengan sedikit menambahkan kode CSS pada template blog kemudian menerapkannya dengan mememanggil kode tersebut kedalam postingan maka tidak akan terlalu sulit untuk membuat posting blog dan membuat variatif gambar dipostingan blog agar tampil lebih cantik. Cara pemasangannya pun sangat mudah dan dalam waktu yang sangat cepat, berikut adalah tutorial cara membuat Efek Gambar Peel Back Dengan CSS3 di postingan blog:

1. Login ke akun blogger.
2. Klik Template > Edit HTML.
3. Cari kode ]]></b:skin> gunakan CTRL+F untuk mempermudah pencarian.
4. Taruh kode berikut ini tepat diatas kode ]]></b:skin>

a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 550px;
height: 434px;
}
a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.5s ease;
-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);
}
a.nowandthen img:nth-of-type(2){z-index: 1;}
a.nowandthen:hover img:nth-of-type(1){clip: rect(0,0,434px,0);
opacity: 0;
}
a.nowandthen.alt{ width: 300px;height: 354px;}
a.nowandthen.alt img{clip: rect(0,300px,354px,0);}
a.nowandthen.alt:hover img:nth-of-type(1){clip: rect(0,0,354px,0);}

5. Untuk memanggil kode diatas muncul di posting blog, silahkan Buat Entri Baru menggunakan mode HTML kemudian masukan kode diberikut ini kedalam halaman posting atau bisa juga di sidebar blog.

<a class="nowandthen">
 <img alt="faceblog evolutions" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3PB0dhVbf2ARLe_-eg0yZfAx7AXfIO8eluBEuDOGTK_xNwzS3UWQSRuxREDOEQdFlbG_p_w2MRV7ZvNyskediQ5ZAjb8Gbm9Vyt6kEgWVATRqglq9wMQoLtkPQYSDOD0hOyQm35PV1rMO/s1600/peel-back-1a.jpg"/>
 <img alt="faceblog evolutions" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSGs8z7kG9yM8psh8evRgsqSOSZGhh-R81YwegbLQhmPP6L1jpO_MWepCS5OzyI6sgNR2-p6EiVezftmJo4S-ar8rqYX0xwRYpuW41R33VM1mqHzO1hb4WwA0TBLPox15KAUNjrpqnJtBj/s1600/peel-back1b.jpg"/>
</a>

DEMO: