CSS3 Alternative to jQuery .fadeIn() or .fadeOut()

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.

  • Bruce

    Nice Pritesh. I think you could optimise the CSS further; as you're only transitioning one property, you can change -o-transition: all 1s ease-out; to  
    -o-transition: opacity 1s ease-out;

    Can I be pedantic and point out that this isn't an HTML5 Alternative to jQuery, but a CSS 3 Alternative to jQuery ?

    Keep up the good work!

  • Anonymous

    thanks for sharing