Как сделать плавную смену картинок при наведении?

Question

[denism300]

Есть стили пунктов меню

#menu-header-menu li.menu-item a {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    color: #0a3658;
    text-transform: uppercase;
    transition: 0.5s;
    text-shadow: 1px 1px 0 #ffffff;
}

#menu-header-menu li.header-menu__price a::before {
    content: "";
    background: url(assets/img/header-menu__price.png) 0 50% no-repeat;
    width: 49px;
    height: 100%;
}
#menu-header-menu li.menu-item a:hover {
    color: #55a038;
    text-decoration: none;
    transition: 0.5s;
}

#menu-header-menu li.header-menu__price a:hover::before {
    background: url(assets/img/header-menu__price-hover.png) 0 50% no-repeat;
}

Как реализовать плавную смену изображения?

Answer 1

[Анита Ковалева]

Попробуй добавить к нужному селектору, или ко всем transition: all 0.4s ease,
где 0.4s нужное тебе значение, либо поиграться со свойством transition, именно оно в css3 отвечает за "плавность" появление элементов.

Answer 2

[alex-1917]

www.jooom.ru/toster/css1.html