title: Add fade transition to onmouseout and onmouseover
body: <p>I have an onmouseover and onmouseout image in my html. And it totally does its job. What I do still struggle with is adding a transition to the onmouse stuff so it doesn't change so quickly. I would like it to fade over into the other picture when you hover over the picture. Is something like this possible?</p>
  
  <p>This person did something like that but it didn't work for me :(  :
  [<a href="https://stackoverflow.com/questions/26298664/change-transition-time-on-onmouseover-and-onmouseout]">Change transition time on onmouseover and onmouseout?</a></p>
  
  <p>Check my code and please help me if there is a simple solution. Best would be without java script...</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;html&gt;
      &lt;body&gt;
            &lt;div class="startpageicons"&gt;
              &lt;div class="icongestaltung"&gt;   
                &lt;img src="images/startpageicon_draw.png" onmouseover="this.src='images/startpageicon_gestaltungunddesign.png'" onmouseout="this.src='images/startpageicon_draw.png'" style="transition: -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;"&gt;
              &lt;/div&gt;
        &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>