Как заставить background-image появится плавно?

Красный background, при наведении на этот же блок появляется вместо красного фона картинка. Все работает, но не могу понять почему transition не работает

.left-box {
    width: 50%;
    height: 800px;
    background-color: $normal-pink;
    float: left;
    &:hover {
      background: url(../../build/images/product.png) no-repeat;
      background-size: cover;
     /* здесь задаю transition */

      &:hover .title {
        color: $black;
        transition: .5s;
      }
      &:hover .line {
        background: $black;
        transition: .5s;
      }
    }