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

Question

[dzenn]

Красный 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;
      }
    }

Answer 1

[Евгений]

Попробуй указать transition, не в ховере, а в самом блоке:

.left-box {
    width: 50%;
    height: 800px;
    background-color: $normal-pink;
    float: left;
    transition: 400ms ease-in-out;
    ...
}

Т.к. transition будет работать лишь для ховера, т.е. когда ховер пропадает - будет мгновенно красный цвет, так же возможно, что в transition у тебя указано явное свойство: transition background-color ...

Answer 2

[Алексей Уколов]

https://habrahabr.ru/post/188722/
stackoverflow.com/questions/23990749/transition-be...