/Simple Fade effect with CSS3

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.


Deepanker Verma is the CEO of Techlomedia and a full time blogger. On this blog, he shares web design resources, SEO tips blog monetization tips.