title: CSS: How to switch two background images with fading transition?
body: <p>I want to switch between to background-image attributes on hover, but the default transition is too fast and sharp and I would like to incorporate a fade opacity transition for both of them. I would like it to fade when I hover and also when I stop hovering when it get reset to the original background-image. Any ideas?</p>
  
  <pre><code>#HeaderLogo {
          background: url('/logourl.png') no-repeat center;
          background-size: contain;   
          display: block;
          width: 800px;
          height: 100px;
          margin-left: auto;
          margin-right: auto;
          cursor: pointer;
      }
  #HeaderLogo:hover {
          background: url('/hoverlogourl.png') no-repeat center;
      }
  </code></pre>