Suppose you have an image with some opacity(transparency), you will like it to be animated(with easing/smoothing effect) to none opacity on hover. This effect is seen in many many websites, and almost all of them use jQuery to achieve it. Even I used to use jQuery for this but while making a website recently I thought that it could be done using CSS instead of jQuery. So I tried it using transition CSS3 tags and I saw it could be easily done with CSS in place of jQuery. Using CSS3 instead of jQuery has many obvious advantages like faster load time of site, lesser heavier website, etc. The effect you achieve by using CSS is absolutely same as jQuery. Live demo can be seen at the end of this post.
The CSS
The CSS is really simple, you can use the below codes intact, or change them according to your requirements. 1s is time duration for the easing effect, ease-out is the easing type, you can even use ease-in, ease-in-out, linear, etc instead of ease-out here and opacity is the opacity/transparency of the element.
Default CSS for the element
{code type=CSS}
opacity: 0.6;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
{/code}
Hover CSS for the element
{code type=CSS}
opacity: 1;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
{/code}
jQuery Method
Just to compare, using jQuery we can do it like this:
{code type=HTML}
{/code}
Live Demo
Here is a live demo below for the fading effect using CSS, alternatively you can click here.
And doing the same using jQuery(Or click here).
If you will like to see them side by side, you can go here, the left frame uses the CSS3 method and the right frame uses the jQuery method.
Further Reading
Below are the pages of CSS tags used in above codes.