<img src="/images/images/home.png" onmouseover="this.src=image1.src;" onmouseout="this.src=image0.src;" id="imgHome">
私はこれらの2つのイメージにCSSトランジションを適用することができるので、瞬時に見ることはできません。
私はこのラインを使わずに、2枚の別々のイメージを作ることを検討していますが、私はこれを好む方法です。
回答：
回答№1は2だからあなたは1人でそれをやりたい img タグ。あなたはそれを達成することができますバックグラウンドCSSプロパティを使用しています。
HTML：
<img id="image1">
CSS：
#image1
{
background: url("http://css3.bradshawenterprises.com/images/Turtle.jpg");
}
#image1:hover
{
background: url("http://css3.bradshawenterprises.com/images/Rainbow%20Worm.jpg");
}
img
{
height: 250px;
width: 500px;
-webkit-transition: background-image 1s ease-in-out;
}
JSFiddleの例： サンプルへのリンク
回答№2の場合は1
トランジションはCSSのプロパティを変更するためのものです。あなたがやっていることは、画像へのパスを変えることで、トランジションはできません。
たとえば、jQueryを使ってトランジションを行うことができます（jQにはいくつかの簡単なアニメーションがあります。 より高度なライブラリを使用してください）。
CSSを使用したい場合は、2（絶対的な位置決めを使用して）画像を互いに重ね合わせる。その後、ホバー上のボトム1の不透明度を1から0に変更し、1つを0から1の上に変更します。不透明度にトランジションを適用するとスムーズに移行するはずです。
<style>
.img{position:relative;}
.top{position:absolute;top:0;left:0;opacity:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-transition: opacity 1s ease-in-out;
}
.bottom{opacity:1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-transition: opacity 1s ease-in-out;
}
.top:hover{opacity:1;}
.bottom:hover{opacity:0;}
</style>
<div class="img">
<img class="bottom" src="/images/http://placekitten.com/200/300?image=15">
<img class="top" src="/images/http://placekitten.com/200/300?image=16">
</div>
サンプル： http://jsfiddle.net/5kyBX/