onmouseover transition effect without jQuery <p>I use onmouseover for hover effects of the main site logo on my dev site <a href="http://www.new.ianroyal.co" rel="nofollow">http://www.new.ianroyal.co</a>. </p> <p>onmouseover changes the site logo image instantaneously, I was wondering if I could apply a transition effect (fade in, or just generally slow down the transition speed) without using jQuery. </p> <p>Here is my code</p> <blockquote> <blockquote> <blockquote> <blockquote> <p><code>&lt;a href="&lt;?php echo esc_url( home_url( '/' ) ); ?&gt;" ONMOUSEOVER='ian.src="http://new.ianroyal.co/wp-content/themes/twentytwelve/images/IN-Logo.png" '<br> ONMOUSEOUT='ian.src="http://new.ianroyal.co/wp-content/themes/twentytwelve/images/IN-Logo1.png" '&gt;&lt;img src="http://new.ianroyal.co/wp-content/themes/twentytwelve/images/IN-Logo1.png" NAME="ian" class="header-image" alt="Ian Nelson"/&gt;&lt;/a&gt;</code></p> </blockquote> </blockquote> </blockquote> </blockquote> <p>I've searched and searched but it seems the only solultions are with jQuery which I don't have a good enough grasp of yet. </p> <p>Thank you</p>