Membuat efek gambar Peel Back dengan CSS3

Membuat 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.

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

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. Simpan template sobat

Penerapannya:

Supaya kode di atas muncul di posting blog sobat » Silahkan buat Entri baru gunakan mode HTML kemudian masukan kode berikut ini kedalam halaman posting blog sobat.

<a class="nowandthen">
<img alt="Blog Irvan Efendy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigY95NT5QDSlSaufNU2bvb386gQyy4SD9UGK7l9sdCtdort8st5AginOQFByt_uNPIAOCbvNrdjnbiJb_rETPoNn9UGgYrmjBk5V7NETpfOqDYigQRxCVPAMP6DLrzBSjapAxc-m4zd_U4/s1600/peel-back-1a.jpg"/>
<img alt="Blog Irvan Efendy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBiDgMN7zCuoU4E2ry6JFnc4-WDkpKmn_mzxKEZpoouUcKrUjLDXR2YRFWJLfEe6MqZu0_kwez_LLFG9rUJhNGDzeLcq6NvC6_jiKn9QMUtE7H3YIWjMRjkLQTF0Ghf0OjSWeEFLgzoSwU/s1600/peel-back1b.jpg"/></a>

DEMO nya seperti ini:

Membuat efek gambar Peel Back dengan CSS3 2014-05-07T01:58:00-07:00 Rating: 4.5 Diposkan Oleh: Unknown