Image with transparent elements overlayed on animated gradient

I am trying animate a colour gradient behind an image with some transparent elements so that only the transparent parts of the image have colour changes. As it is currently, the colour gradient animation runs across the whole image as though it is in front of the png flower image rather than behind it. Can someone help me please? Thanks

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