Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi

Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi – bisa dikatakan kurang lebih agak mirip dengan efek peel back pada gambar di blog yang sudah pernah saya posting pada sebelumnya. Efek pull out gambar dengan css3 keyframe animasi ini merupakan perpaduan dari dua gambar yang terdapat palam satu posisi yang tepatnya pada gambar utama masih terdapat backing gambar yang terletak dibelakangnya dan apabila pada gambar utama tersebut tersentuh oleh mouse maka akan hover dan pada backing gambar akan berjalan secara halus dari sisi belakang kemudian ke arah samping kanan lalu menggantikan posisi gambar utama pada posting blog. Untuk lebih jelas dan detailnya maka bisa dilihat pada halaman demo dan berikut adalah tutorial untuk cara membuat Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi di blog:

1. Login ke akun blogger.
2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).

.pulloutimage{
  position: relative;
}

.pulloutimage img{
  position: absolute;
  left: 0;
}

.pulloutimage img.ondemand{
  opacity: 0;
  visibility: hidden;
}

.pulloutimage img.original{
  z-index: 1;
}


@-webkit-keyframes revealfromright{
  0%{
  z-index: -1;
  opacity: 0;
  }
  50%{
  opacity: 1;
  z-index: -1;
  left: 100%;
  box-shadow: none;
  }
  51%{
  z-index: 2;
  }
  100%{
  left: 0;
  box-shadow: 8px 8px 15px gray;
  }
}

@-moz-keyframes revealfromright{
  0%{
  z-index:-1;
  opacity:0;
  }
  50%{
  opacity:1;
  z-index:-1;
  left:100%;
  box-shadow: none;
  }
  51%{
  z-index:2;
  }
  100%{
  left:0;
  box-shadow: 8px 8px 15px gray;
  }
}

@-ms-keyframes revealfromright{
  0%{
  z-index:-1;
  opacity:0;
  }
  50%{
  opacity:1;
  z-index:-1;
  left:100%;
  box-shadow: none;
  }
  51%{
  z-index:2;
  }
  100%{
  left:0;
  box-shadow: 8px 8px 15px gray;
  }
}


.pulloutimage:hover img.ondemand{
  -webkit-animation-name:revealfromright;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
 
  -moz-animation-name:revealfromright;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: 1;
 
  -ms-animation-name:revealfromright;
  -ms-animation-duration: 1s;
  -ms-animation-iteration-count: 1;
 
  animation-name:revealfromright;
  animation-duration: 1s;
  animation-iteration-count: 1;
 
  visibility:visible;
  opacity:1;
  box-shadow: 8px 8px 15px gray;
  z-index:2;
}

.pulloutimage:hover img.original{
  opacity:0.5;
}

3. Klik Terapkan ke Blog.

Selanjutnya apabila akan menampilkan Efek Pull Out Gambar Dengan CSS3 Keyframe Animasi ini kedalam postingan maka langkahnya adalah saat posting menggunakan mode HTML kemudian masukan kode dibawah ini:

<div class="pulloutimage" style="height:250px">
<a href="http://mas-andes.blogspot.com" target="_blank"><img class="original" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN2QyaSmhreWIQB6T6_cE62SIedWRd47eWBOdRqCb602iGBQg9YJ14E-A8UHWBVIZhvEGP2SUMkoN9jwo3qmwsOtjr8QmS0CDwbxnHFm5OS_uPLfBfPmz53T_AwHOhYCQuMZyQlBF2MQ6v/s320/cecilia-cheung-11.jpg" width="320" /></a>
</div>

Keterangan:
Ganti "http://mas-andes.blogspot.com" dengan URL halaman yang di inginkan.
Ganti URL gambar dengan yang di inginkan.
Untuk width dan height silahkan sesuaikan selera.

DEMO: