title: CSS transition on background image change of DIV
body: <p>I tried to apply transition property to give an effect when image changes on hover but it seems to not work. Please have a look and help me out.</p>
  
  <pre><code>.ow-outer {
      background-color: #fff;
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 1px solid #fff;
      text-align: center;
      padding: 20px;
      background-image: url(../images/team-canada-light.png);
      background-size: 120px;
      background-repeat: no-repeat;
      background-position: center;
      transition: all 0.3s ease-in-out;
  }
  .ow-outer:hover {
      background-image: url(../images/team-canada.png);
  }
  </code></pre>