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

#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;
}