ad

Simple Fade effect with CSS3

refresh-timer-jquery-plugin1

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.

Tags: |
Nord VPN Sale

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.


Similar Articles

1 Comments

  • Chapel Hill Web Design & SEO says:

    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.

  • Chapel Hill Web Design & SEO says:

    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 comment

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

2020 UseThisTip | Developed By Deepanker