Looking for help on animating a color gradient behind an image with transparent elements so that only the transparent parts of the image change colors. Currently, the animation is covering the entire image as if it's in front of the PNG flower image rather than behind it. Any assistance would be greatly appreciated. Thank you!
HTML
<body>
<h1>
<div class="shimmer"></div>
<img src="https://i.imgur.com/XYoiBsw.png" />
</h1>
</body>
CSS
h1
{
display: inline-block;
overflow: hidden;
position: relative;
}
h1 a, h1 div.shimmer
{
height: 100%;
width: 100%;
position: absolute;
top: 0px;
}
h1 a
{
display: block;
z-index: 3;
}
h1 a span { display: none; }
h1 div.shimmer
{
background-image: linear-gradient(110deg, rgba(109,246,217,0.60) 25%, rgba(209,246,217,0.70) 37%, rgba(255,255,255,0.98) 50%, rgba(246,176,45,0.70) 85%, rgba(65,226,135,0.60) 99%); /* W3C */
background-repeat: repeat-y;
background-size: 100% 100%;
left: -100%;
z-index: 2;
}
h1:hover div.shimmer
{
left: 100%;
transition: left 1.35s linear;
}