Penarikan gambar menggunakan CSS3 animasi keyframe

S

ebagai contoh bisa anda lihat disini:DEMO
Cara pembuatan nya:]]></b:skin>
Cari kode
copas kode css dibawah ini dan letakkan di atas nya:

<style> .pulloutimage{ position: relative; } .pulloutimage img{ position: absolute; /* absolute position and stack images inside container */ left: 0; } .pulloutimage img.ondemand{ /*CSS for image shown on demand */ opacity: 0; visibility: hidden; /* hide it initially (mainly for legacy browsers) */ } .pulloutimage img.original{ z-index: 1; /* set base z-index of initially shown image */ } @-webkit-keyframes revealfromright{ /* keyframe animation that slides a DIV out from another before overlapping later */ 0%{ /* Start of animation */ z-index: -1; opacity: 0; } 50%{ /* Half way point, move image to right edge of container */ opacity: 1; z-index: -1; left: 100%; box-shadow: none; } 51%{ /* 51% point, stack animating image on top of original image */ z-index: 2; } 100%{ /* Final point, move animating image back so it's on top of original */ 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{ /* when mouse rolls over pulloutimage container, style to apply to "ondemand" image */ -webkit-animation-name:revealfromright; /* specify animation keyframe */ -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{ /* when mouse rolls over pulloutimage container, style to apply to "original" image */ opacity:0.5; } </style>

Contoh Penerapan nya:
<div class="pulloutimage" style="width:298px; height:223px">
<img class="original" src="http://t3.gstatic.com/images?q=tbn:ANd9GcRh_DwANCI50-nlp_uP-r4cD3y-DTbt1nIccI_386YjJbtFfPy4" />
<img class="ondemand" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj7C1RXru8X9zzDZk68llHD8zQ0e-TmF33k2NHDX8TsPpYyh3jnQzhMsHbKezuQCKI6zhGIeaYw0MP0DGjbDMBiBCibxoYPOjj7EdAUJRyzyeM4G6y28qYsLN51mB122ghRuURmRwN5tM/s1600/transparent_lexus_11.jpg" />
</div>


<div class="pulloutimage" style="width:263px; height:199px">
<img class="original" src="http://t2.gstatic.com/images?q=tbn:ANd9GcQ3MFIBUMJm6qV4Oci3kDg87jaDXDC7a95FIHzwjrPeCu9AjAsL" />
<img class="ondemand" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL3wK9ZXG3bT9wr3TXYzc4breO8B_ny1AiZByfGdSHnn75kQQxNVVGtyIquesGyImoXEWm5Ow2ncrj5Ox0PFxdgD4gIU8_8Q6CWuzqzmPuf6HuXeSvn4FFSf53OVuaxIiiUqZnBnC1lkg/s1600/transparent_lexus_01.jpg" />
</div>


Selamat Mencoba