Cara membuat gambar tertarik keluar menggunakan keyframe animasi CSS3

Animasi CSS3 dapat diatur/diselaraskan dengan baik dan dipecah menjadi "frame (bingkai)", terima kasih banyak kita ucapkan kepada@keyframe. Efek animasi ini bekerja ketika mouse kita gerakan/gulirkan ke gambar. Saat ini support dengan browser chrome, safari, firefox dan mungkin IE 10.

View Demo

LANGKAH-LANGKAH:

• Masuk ke akun blogger anda -> Klik Drop down menu
• Kemudian klik Template -> Backup template terlebih dahulu -> Edit HTML

• Cari tag / kode ]]></b:skin> kemudian pastekan kode CSS berikut tepat diatas kode ]]></b:skin> 

.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; }

KODE HTML 

• Tambahkan kode HTML berikut didalam postingan (HTML bukan compose) atau anda bisa meletaknnya di gadget HTML/Javascript
• Klik Tata letak -> Tambahkan gadget -> masukan kode didalamnya -> Simpan gadget.

<!--keyframe animasi CSS3 by jalu-pangna.blogspot.com -->

<div class="pulloutimage" style="width:298px; height:223px">
<img class="original" src="http://i1087.photobucket.com/albums/j479/jalupangna/prabusiliwangi.jpg" />
<img class="ondemand" src="http://i1087.photobucket.com/albums/j479/jalupangna/prabusiliwangi.jpg" />
</div>

<br />
<div class="pulloutimage" style="width:263px; height:199px">
<img class="original" src="http://i1087.photobucket.com/albums/j479/jalupangna/kanjengratu3.jpg" />
<img class="ondemand" src="http://i1087.photobucket.com/albums/j479/jalupangna/ratukidul.jpg" />
</div>  
<!--keyframe animasi CSS3 by jalu-pangna.blogspot.com -->

KETERANGAN: 

Silahkan ganti link gambar1 pada warna kuning dan gambar2 pada warna hijau diatas dengan link gambar anda.

Happy Blogging...

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 03.38