CODEWITHSUNDEEP
javascriptcsscss-transitions
user9124
user9124

Reputation: 143

How to make text slowly change color on hover?

I want to make my text change color slowly like this: http://trentwalton.com/2011/05/10/fit-to-scale/

Any Ideas?

Upvotes: 14

Views: 31151

Answers (4)

ShibinRagh
ShibinRagh

Reputation: 6646

Try

a {
  color: red;

-webkit-transition: color 0.2s ease-out;
 -moz-transition: color 0.2s ease-out;
 -o-transition: color 0.2s ease-out;
 -ms-transition: color 0.2s ease-out;
 transition: color 0.2s ease-out;
}
a:hover {
   color: blue;
}

Upvotes: 0

Anujith
Anujith

Reputation: 9370

Use CSS Transitions.. See this: Fiddle

a {
  color: #000000;
}
a:hover {
   color: #E24B3B;
}
ul a {
 -webkit-transition: color 0.2s ease-out;
 -moz-transition: color 0.2s ease-out;
 -o-transition: color 0.2s ease-out;
 -ms-transition: color 0.2s ease-out;
 transition: color 0.2s ease-out;
 }

Upvotes: 3

user1823761
user1823761

Reputation:

Working FIDDLE Demo

You can do it with CSS Transitions:

a {
    color: lime;
    -webkit-transition: color 1s;
    -moz-transition:    color 1s;
    -ms-transition:     color 1s;
    -o-transition:      color 1s;
    transition:         color 1s;
}

a:hover {
    color: red;
}

Upvotes: 25

Janak
Janak

Reputation: 5052

As said by @elclanrs or you can also use this.

$("selector").hover(function(){
    // your code to fade in or fade out ....
});

Upvotes: 0

Related Questions