Simple Fade effect with CSS3

Most of the people still think that we can only create fade effect with Javascript or Jquery. But this is not true at all. You can also create this effect with CSS.

See the CSS code:

.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}

.fade:hover {
opacity: 0.5;
}

Now use this class in anything on which you want to create this fade effect.
<p class=”fade”>This is my text element that will fade when you hover over it.</p>

I have used this in the paragraph as you can see above. Now Hover over the paragraph with fade class and see the effect.

Demo: take the mouse over the paragraph below

This is my text element that will fade when you hover over it.

You can also use this on the image by using class=”fade”
as in this
<img src=”imageurl” alt=”” width=”200″ height=”150″ class=”fade” />

Take the mouse over the image to see the effect.

advertisement

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest updates, web design resources and tools.

You have Successfully Subscribed!

About The Author

    ADD YOUR COMMENT

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Receive fresh web design resources and SEO tips in your email by our weekly newsletter

You have Successfully Subscribed!