.gradientswap {
z-index: 1; /* matters! */
background-color: transparent;
background-image: linear-gradient(180deg, red 50%, blue 100%);
}
.gradientswap::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
background-image: linear-gradient(180deg, green 50%, yellow 100%);
opacity: 0;
transition: opacity 0.4s;
z-index: -1;
}
/*this next part changes if using JS toggleClass*/
.gradientswap:hover::before {
opacity: 1;
}
With JS .toggleClass on hovering an element
$('.gradienttrigger').hover(function () {
$('.gradientswap').toggleClass('swapnow');
});
.gradientswap.swapnow:hover::before {
opacity: 1;
}