I have a .gif file on my site that i'd like to edit so i can have a constant hue shifting filter over it but if someone were to click and drag it itd appear as normal, can someone help please?
I don't want just a rainbow to be layered on my gif, but I need it to be constantly shifting hue like a rainbow if that makes sense.
I've tried to figure it out but I cant. also sorry for any bad english
The solution to your problem is not as hard as you may think. It only requires a CSS 'animation' with @keyframes that changes the colors in you image through filter: hue-rotate(...), unless the image gets hovered or activated with the mouse/tapped.
snippet
/*
keep rotating the filter unless the image
is hovered or activated...
*/
.filtered:not(:where(:hover, :active)) {
animation: animated-filter 3s infinite;
}
@keyframes animated-filter {
0% {
filter: hue-rotate( 0deg)
}
50% {
filter: hue-rotate(360deg)
}
100% {
filter: hue-rotate( 0deg)
}
}
/* Just eye-candy for the demo */
.wrapper {
width: 16rem;
height: 16rem;
}
.wrapper img {
display: block;
width: 100%;
object-fit: cover;
}<div class="wrapper">
<img class="filtered" src="https://picsum.photos/320?random=1">
</div>