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).
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:
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://digratisan.blogspot.com/" target="_blank"><img class="original" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqnw4y0VmsH3i6RREnyRwvA3x4bBrp4AjFZPdQ-BfXxCH75EAHHQNiFPz1d76gpyTvcIxSZw7JGN33aOvZvFrTnhShlibVWzfPCfIgYEWvmHqhzPHSO8zpryo8gbOnlDm668mOEpX6EVzQ/s320/cecilia-cheung-11.jpg" width="320" /></a>
</div>
Keterangan:
Ganti "http://digratisan.blogspot.com/" dengan URL halaman yang di inginkan.
Ganti URL gambar dengan yang di inginkan.
Untuk width dan height silahkan sesuaikan selera.
Ganti "http://digratisan.blogspot.com/" dengan URL halaman yang di inginkan.
Ganti URL gambar dengan yang di inginkan.
Untuk width dan height silahkan sesuaikan selera.
atau seperti ini 
kemudian uploadlah image tersebut ke situs tempat penyimpanan image
seperti photobucket. Setelah proses upload selesai, copylah URL image
tersebut, seperti contoh dibawah ini : 
Pada kesempatan kali ini saya hanya ingin berbagi 
) mari kita menuju ke pokok pembahasan.
