Is there a way to make the ease-in-out effect work without modifying the HTML code? http://jsfiddle.net/68ojLg6p/
<img class="transition-img"
onmouseover="this.src='http://1.bp.blogspot.com/-ISjKMLTnaTQ/Ty-USX-J1uI/AAAAAAAAC_0/YB6MUMflRmg/s400/ferrari+_car_wallpapers.jpg'"
onmouseout="this.src='http://2.bp.blogspot.com/-vAbVucAOQXA/TWPq-p9hPEI/AAAAAAAAAjQ/wVABlnpN6xE/s400/2011-cars-images-audi-r8-tdi-le-mans-04.jpg'"
src="http://2.bp.blogspot.com/-vAbVucAOQXA/TWPq-p9hPEI/AAAAAAAAAjQ/wVABlnpN6xE/s400/2011-cars-images-audi-r8-tdi-le-mans-04.jpg" alt="" height="300" width="400">
css:
.transition-img:hover {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}