Opacity without Scripting

Keywords:

15 Jun 2007

First of all a quick explanation. Opacity can be described as the opposite of transparency. What I mean by this is, you can think of 20% opacity being the same as 80% transparency. An unaltered image has an opacity of 1.0 or is fully opaque.

An opacity hover effect can have a nice visual impact for your images. It is also an alternative than the traditional method of having 2 different images and having to use image pre-load techniques.

The below CSS3 method works in current versions of IE, Firefox and Opera. There is only a single image used each time (reduces page load times) and minimal HTML and CSS required to achieve the result. I have also added some padding and a background color for effect.

The -moz-opacity is included strictly for backwards compatibility with older versions of Mozilla and not required for current versions of Firefox.

25% Opacity

50% Opacity

75% Opacity

90% Opacity

The HTML
The CSS

/* 25% Opacity */
a.nzwh-opacity-25 img {
  filter:alpha(opacity=25); 
  -moz-opacity: 0.25; 
  opacity: 0.25;
  background: #ddd;
  padding: 10px;
  border: none;
  }
a.nzwh-opacity-25:hover img {
  filter:alpha(opacity=100);   
  -moz-opacity: 1.0;   
  opacity: 1.0;
  background: #aaa;
  padding: 10px;
  border: none;
  }

/* 50% Opacity */
a.nzwh-opacity-50 img {
  filter:alpha(opacity=50); 
  -moz-opacity: 0.50; 
  opacity: 0.50;
  background: #ddd;
  padding: 10px;
  border: none;
  }
a.nzwh-opacity-50:hover img {
  filter:alpha(opacity=100);   
  -moz-opacity: 1.0;   
  opacity: 1.0;
  background: #aaa;
  padding: 10px;
  border: none;
  }

/* 75% Opacity */
a.nzwh-opacity-75 img {
  filter:alpha(opacity=75); 
  -moz-opacity: 0.75; 
  opacity: 0.75;
  background: #ddd;
  padding: 10px;
  border: none;
  }
a.nzwh-opacity-75:hover img {
  filter:alpha(opacity=100);   
  -moz-opacity: 1.0;   
  opacity: 1.0;
  background: #aaa;
  padding: 10px;
  border: none;
  }

/* 90% Opacity */  
a.nzwh-opacity-90 img {
  filter:alpha(opacity=90); 
  -moz-opacity: 0.90; 
  opacity: 0.90;
  background: #ddd;
  padding: 10px;
  border: none;
  }
a.nzwh-opacity-90:hover img {
  filter:alpha(opacity=100);   
  -moz-opacity: 1.0;   
  opacity: 1.0;
  background: #aaa;
  padding: 10px;
  border: none;
  }

Bookmark/Search this post with:

Add new comment