Animated Gradient Text on Hover

Hover over the blog title to see it in action ⤴

Custom CSS

• Change the selector to whatever you want to be gradient on hover

/* Animated Gradient Text on Hover */
.BlogItem-title:hover {
   background-image: linear-gradient(-45deg, #53D6FF, #666BE1, #E45372, #F07C63) !important;
   background-size: 400% !important;
   background-clip: text;
   -webkit-background-clip: text;
   text-fill-color: transparent;
   -webkit-text-fill-color: transparent;
   -webkit-animation: Gradient 8s ease infinite !important;
   -moz-animation: Gradient 8s ease infinite !important;
   animation: Gradient 8s ease infinite !important;
}

/* Animation Keyframes */

@-webkit-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@-moz-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes Gradient { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

Source: Ghost Plugins