title: onmouseover transition effect without jQuery
body: <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 noreferrer">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>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><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" ' 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></pre>
  </div>
  </div>
  </p>
  
  <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>