Simple Fade effect with CSS3

Best WordPress Hosting

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.


1 Comment

  1. I liked up to you will obtain carried out proper here. The comic strip is tasteful, your authored material stylish. nevertheless, you command get bought an impatience over that you want be handing over the following. ill indisputably come more beforehand once more as precisely the same just about very ceaselessly inside of case you protect this increase.

Leave a Reply

Your email address will not be published. Required fields are marked *