Membuat Aneka Animasi Image di Blogger

1. Efek image berganti ketika cursor didekatkan

<style type="text/css">
.blogywalky{float:center; margin:0px; autowidth:0px; autoheight:0px; autoborder:none; overflow:hidden}.details{width:200px; height:300px; background:#000; color:#fff; text-align:center} #blogywalky-nice{position:relative;}#blogywalky-nice img{opacity:1-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}#blogywalky-nice .details{position:absolute;top:0;left:0;opacity: 0;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}#blogywalky-nice .details:hover{opacity: .9;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}
</style>
<div class="blogywalky" id="blogywalky-nice">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR2TLdC9l4S8-KMTakcJBeUgwVzglVUmX13EEW17GrUgnHmwLPQs0crGt6RqzutaPgtJzjHCvCwvACyTKoSvVmhyiBYoHODzSxhKe-ZDf3WQujVjvCD3UVhHRNZnXtWT1EgX6O3YAp37s/s1600/chicken1.png" />
<div class="details">
<img height="328" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHJmwRCJNa08CJgB5Ujjum_ZXR3YDwxZZ6SGAEvtcGu_DLgdGXFD_i6PKyycaGL_0p1seCXTNBh8yVqGUECUQh6P3mg3IylyfMsW8BdIEKaSpsfPnsvDg3KdE04hf46eFuMSUI98bhgss/s1600/chicken2.png" width="328" /></div>
</div>