Search here:
+91-8144946544, +91-9900255521 reachout at imajineweb dot com

CSS3 Tutorial for Text Hover Transition to change the color

Home > CSS3 Tutorial for Text Hover Transition to change the color

Please note:

This CSS3 text transition property tutorial works perfectly fine only in Google Chrome.

Text is the most integral part of every website. Usually text is preferred to be as simple as possible, but if there is no variation or effect given to the text on the pages, then it rather makes the website more monotonous and uninteresting. With the help of this tutorial, we can actually give our text, different types of effects (transition effects specifically), which does contribute to the overall look and feel of the page.

Style given to the above text effect is as:



font-family:Arial, Helvetica, sans-serif;



-webkit-transition-property:color, text;

-webkit-transition-duration: 1s, 1s;

-webkit-transition-timing-function: linear, ease-in;

-moz-transition-property:color, text;


-moz-transition-timing-function: linear, ease-in;

-o-transition-property:color, text;


-o-transition-timing-function: linear, ease-in;




Explanation of the above style

‘-webkit-transition-property’ helps us to provide transition between the colors.

‘-webkit-transition-timing-function’ is a mathematical function that is used to produce a smooth transition (Linear, Ease-in, Ease-out). This is commonly known as easing function. We can use constants to specify preset points of the curve or the cubic-bezier function to specify your own points.

According to the above code, on rollover / mouseover, the transition takes place linearly, whereas on rollout the transition style is ease-in. The timing function is specified using a cubic Bezier curve. You can have a detailed information regarding the cubic bezier function from This property allows a transition to change speed over its duration.

‘-webkit-transition-duration property’ helps specify the duration at which we would like the color change transition to take place.

Similarly ‘-moz’ and ‘-o’ property tags should work for mozilla and IE browsers respectively.

To make best of your learning, check our work. It should give you some inspiring ideas on what you can try next.

You can also write to me at jayanthi at imajineweb dot com.

Easier solution to embed audio files in WordPress CMS website

You can add audio file to media library of WordPress website. WordPress makes use of HTML5 to embed audio and it is compatible with all the popular browsers and devices.

Read More

Check out our other interesting articles on –

Online Web Presence and
User Experience

Corporate Branding

We create world class custom logos

Looking for Professional, Corporate, Unique logo for your Business?

We design professional, high quality logos. In fact logo design is our strength. And our cost for logo design is extremely reasonable too. Try us out! You will definitely be happy with our service.

You can mail us at reachout[@]
and we would love to work with you on your logo design projects.

Write to us
close slider