JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

div {
    --gradient: linear-gradient(to top, #86a53c, #516520);
  
    background: url(https://placeholdit.imgix.net/~text?txtsize=33&txt=Hover%20over%20me&w=200&h=200) no-repeat center center,
                var(--gradient);  
                
    width: 250px;
    height: 250px;
}

div:hover {
    --gradient: linear-gradient(to top, #A0C153, #516520);
}