CODEWITHSUNDEEP
htmlcssfiltercss-animations
Patrick
Patrick

Reputation: 820

Rotate hue on hover and remove grayscale filter

I have a colored image. I have a grayscale filter applied on initial load. And on hover I remove the grayscale filter. However id also like to rotate the color of the hue filter on hover. But I am a bit confused why its not working.

Thanks for any help!

JS FIDDLE

HTML

<div id="duplicater0" class="flavNameDescBox addnewflavorimg col-4"> 
<img src="http://lorempixel.com/400/200/sports/1/"/>
</div>

CSS

  .addnewflavorimg img{
    margin-left:-21px;
    margin-top:-20px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    }

  .addnewflavorimg img:hover{
    -webkit-filter: none;
    filter: none;
    -webkit-animation: hue 3s infinite;
    animation: hue 3s infinite;
    }

Upvotes: 2

Views: 1097

Answers (2)

twxia
twxia

Reputation: 1813

Like this? By using @keyframes, you can hue-rotate from 0deg to 360deg

https://jsfiddle.net/1Ljys5gj/

@keyframes hue {
  0% {
   -webkit-filter: hue-rotate(0deg);
  }
  100% {
   -webkit-filter: hue-rotate(360deg);
  }
}

Upvotes: 2

Bruno Ferreira
Bruno Ferreira

Reputation: 181

.addnewflavorimg img{
    margin-left:-21px;
    margin-top:-20px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    }

  .addnewflavorimg img:hover{
    -webkit-filter: none;
    filter: none;
    -webkit-animation: hue 3s infinite;
    animation: hue 3s infinite;
    }

   @keyframes hue{
       0%{
           transform: rotate(0deg);
       }
       100%{
           transform: rotate(360deg);
       }
   }
<div id="duplicater0" class="flavNameDescBox addnewflavorimg col-4"> 
    <img src="http://lorempixel.com/400/200/sports/1/"/>
</div>

Upvotes: 0

Related Questions