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 mulus sehingga lebih jelas terlihat saat onmouseover gambar akan terkesan menjadi lebih cantik.

DEMO-nya bisa Anda lihat dengan mengklik tombol di bawah ini:

• DEMO Klik disini!!!

Untuk membuat efek gambar peel back dengan css3 caranya sangat sederhana sekali, silahkan Anda simak langkah-langkah di bawah ini:

1. Login ke akun blogger Anda.
2. Klik Template  Edit HTML
3. Kemudian tekan CTRL+F cari kode ]]></b:skin> atau </style>
4. Lalu tambahkan script CSS berikut ini tepat di atas 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 Anda

Penerapannya :

Supaya kode di atas muncul di posting blog Anda  Silahkan buat Entri baru gunakan mode HTML kemudian masukkan kode berikut ini ke dalam halaman posting blog Anda.

<a class="nowandthen">
<img alt="Blog Alvin Warasi" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4ejAQ0bmUrMhVVl75-fqwcDrqwl5bn8CnFC_vuCu0YzlbUQHsHTgMWTi-1mUvjxiIwR7uxn-AkDFkvPyvqfRPEHMSeE8pRgYggmTML_3WIGrWm_-xT4lI4Q9BgZj-YQJaRTLjipuWnYci/s1600/peel-back-1a.jpg"/>
<img alt="Blog Alvin Warasi" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHyszM-zPFRUJJp3lM9DGuT1Awg6up7-QeeaHfPcddwA0kk-UffOvprkHcpOJ2oq1zr0wgN_OiF8iMc3WeyvsVwU4FONNQ9RMILxRYtaDf6msRfNhwjOR4i6pFBTm0xD-2tB1LuxyDQm1z/s1600/peel-back1b.jpg"/></a>

Selamat mencoba, semoga berhasil,..

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250