Show faded image and clear on mouse hover

To show blurred, faded or washed-out image by using CSS and clear effect on mouse over on the image we need to use simply two CSS opacity and filter: alpha

See following image, by default all will be faded on page load and once user will mouse over on any image that will look like the third image means that will be cleared.

We can use these CSS anywhere in our application, for a single image, images in grid view, images in data list or any other control used by our application, here is the CSS

.faded
{
   opacity:0.5;
   filter:alpha(opacity=50);   /* For IE */
}

.faded:hover
{
  opacity:1.0;
  filter:alpha(opacity=100);   /* For IE */
}

Now let's see the HTML, how to use these two classes:

<img src="/images/lion1.png" alt="lion1" class="faded" />
<img src="/images/lion2.png" alt="lion2" class="faded" />

OR

<asp:Image ID="img1" runat="server"
    ImageUrl="/images/lion1.pmg" CssClass="faded" />
<asp:Image ID="img2" runat="server"
    ImageUrl="/images/lion2.pmg" CssClass="faded" />

As we can see here we just added class faded and that's only need to give the faded effect on an image. This css can be used for any element like div, span or any element which you want and effect will be same.

Other blogs you may like

6 Lesser Known Things about CSS

![alt text][1] CSS keeps updating itself, in a way that you need to keep up with the changing features and tones of this stylesheet. You need to know the new syntax, and also the no-code methods that you can ideally use. Here you will be introduced to some of the lesser known facts of CSS that... By Deepa Ranganathan   On 25 Sep 2015  Viewed: 835

5 CSS Customizations for Your Wordpress Website

<center>![Customizations for Your Wordpresst][1]</center> Have you just started using Wordpress? If yes, then there are a few things that you may want to play around with. Customizing a Wordpress theme at beginner level actually means customizing your stylesheets to make the design look... By Deepa Ranganathan   On 06 May 2015  Viewed: 411

Rotating banner simplest way with jquery and css

Rotating banner appeals most of the client and it's quite time consuming for developers to judge which library they need to use and do modification in them according to their requirements. In this article we are going to create the simplest and fully working rotating banner by writing just two... By Ali Adravi   On 18 Apr 2015  Viewed: 7,364

CSS selectors - we must know

**1. Universal Selector: *** *{margin:0; padding:0} Most of the designers use * selector to remove the margin and padding, but we should avoid it because it is too heavy. *.class1 and .class are equivalent. *.#content and # content are equivalent. **2. Descendant selectors: X ... By Ali Adravi   On 30 Jan 2013  Viewed: 554

What is !important in CSS and what is the purposse of it?

As we know CSS styles works from top to bottom, suppose you have created two class with the same name or define the style of any element at two places, which one will apply on your page, can you guess which one will apply, yes you are right the last one because CSS works from top to... By Mike .Net   On 28 Jan 2013  Viewed: 487