Sanfter Übergang bei onmouseover

[Gunds]

Ich möchte auf meiner Webseite ein "thumb.jpg" zeigen, wobei beim Überfahren desselben, das Bild GROSS angezeigt wird.
Das funktioniert alles einwandfrei, nur möchte ich den Übergang nicht mit einem Schlag, sondern sanft ablaufen lassen.
Nach langem "Googeln" habe ich diverse Lösungen entdeckt, allerdings nicht mit javascript! Ist dies denn überhaupt möglich, oder weiss jemand wie man dies bewerkstelligen kann, dass es auch auf diversen Browsern einwandfrei funktioniert?
Als autodidaktischer Anwender, wäre ich froh über eine detaillierte Erklärung, anstelle von "schaue doch bei xxxx.links!"
Herzlichen Dank für jeden Tipp.

  
<td class="Stil14">  
       <div style="float: left;"  
       class="img_caption left">  
       <img class="caption"  
       src="/gunds/bilder/thumb_ruestung_01.jpg"  
       onmouseover="this.src='/gunds/bilder/ruestung_01.jpg'"  
       onmouseout="this.src='/gunds/bilder/thumb_ruestung_01.jpg'"  
       align="top" border="0">  
       <p>R&uuml;stung 01</p>  
       </div>  
</td>