Membuat efek gambar Peel Back dengan CSS3 ~ blog sepot

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/AVvXsEi7LinpaHSYgDbLzsVbAVrBznNYRK65_EQ-1EjiJTdLwMAyEbZ8819fI16tX3B9yFAunKIF2zNvoxrBr3H7QaXjcl9GMn_L2hA8t3AHf49U6WLtsszwjNUupAB3VcT00kRF8kpq-xeE0vr1/s1600/peel-back-1a.jpg"/>
<img alt="Blog Irvan Efendy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimhAOzna7pQ5DeYZIhArTt0wKgSnqq26QFI73CJMmQWDpsDeNVWhhj444zvtcCxL0v8RW2pPYkZf07P3rkLpvn9CEKQ-gv6Wizqkt5IREqwhRVMMKVncojdQoTTQhlzEjTYDVveaMoXesS/s1600/peel-back1b.jpg"/></a>

DEMO nya seperti ini:

Terima kasih telah membaca artikel tentang Membuat efek gambar Peel Back dengan CSS3 di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.