On Hover Ease-in Ease-out

This is a simple example using css3 for image ease-in ease-out very smoothly.

Index.html

<div style="text-align:center">
 
<img src="http://fivera.net/wp-content/uploads/2013/08/green.png" alt="fivera" width="200" height="200">


</div>
<style>
img {
  height: 200px;
  width: 200px;

  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

img:hover {
  width: 220px;
  height: 220px;
}

</style>