Add fade transition to onmouseout and onmouseover

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?

This person did something like that but it didn't work for me :( : [Change transition time on onmouseover and onmouseout?

Check my code and please help me if there is a simple solution. Best would be without java script...

<html>
    <body>
          <div class="startpageicons">
            <div class="icongestaltung">   
              <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;">
            </div>
      </body>
</html>

Solution

Changing the src of an image won't trigger css transition. Here is a pure css solution you can try. You can use a div as the container and set the background-image on hover.

.icongestaltung {
  background: url(http://www.iconsdb.com/icons/preview/orange/stackoverflow-6-xxl.png) center center no-repeat;
  background-size: contain;

  width: 150px;
  height: 150px;

  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.icongestaltung:hover {
  background-image: url("http://www.iconsdb.com/icons/preview/gray/stackoverflow-xxl.png");
}

<html>
<body>
  <div class="startpageicons">

    <div class="icongestaltung"></div>

  </div>
</body>
</html>