CSS Images Menu using transparency for your website

In this CSS tutorial it wil be explained how to create an awesome CSS menu using images and some transparency level.

Prepare three pictures with 100x75 dimensions. The final result should be a CSS images menu like the one below:

For creating a transparent image it will be used filter:alpha(opacity=n) for Internet Explorer versions and -moz-opacity:m for Mozilla browsers, where:
 - n represents an integer between 0 and 100;
 - m represents a value between 0.0 and 1.0.
When the value of n or m is lower, the more transparent the image is.

Let's begin!

1. Put  your images on your website and make a link to them like below:

 <a href="http://www.tutorial5.com"> <img src="cssmenu1.jpg" border="0" alt="Css images menu"></a>
 <a href="http://www.rentahobby.com"> <img src="cssmenu2.jpg" border="0" alt="Css images transparency"></a>
<a href=" http://www.tutorial5.com"> <img src="cssmenu3.jpg" border="0" alt="Css website menu"></a>
 
To src property insert the path to your image. For example images/cssmenu/yourimage.jpg.

2. Now we will add some style for setting the images transparency to 50%. Add the following code to every image:

 style="-moz-opacity:0.5;filter:alpha(opacity=50)"

3. Now, we want to change the transparency of the images back to none when the mouse is over them. We will use onmouseover and onmouseout Javascript events. So, if the mouse is over the image we will apply a style with no transparency (that means n=100 and m=1.0), and when the mouse is not we will apply a style with 50% transpanrency (that means n=50 and m=0.5). So, add the next code to each of your images: 
  onmouseover="this.style.MozOpacity=1; this.filters.alpha.opacity=100" 
  onmouseout="this.style.MozOpacity=0.5; this.filters.alpha.opacity=50"

4. And in the end you vode menu should look like below:

<a href="<http://www.tutorial5.com"> <img src="cssmenu1.jpg" border="0" alt="Css images menu" style="-moz-opacity:0.5;filter:alpha(opacity=50)" onmouseover="this.style.MozOpacity=1; this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5; this.filters.alpha.opacity=50" ></a>

 <a href="http://www.rentahobby.com"> <img src="cssmenu2.jpg" border="0" alt="Css images transparency" style="-moz-opacity:0.5;filter:alpha(opacity=50)" onmouseover="this.style.MozOpacity=1; this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5; this.filters.alpha.opacity=50" ></a>

 <a href="http://www.tutorial5.com"> <img src="cssmenu3.jpg" border="0" alt="Css website menu" style="-moz-opacity:0.5;filter:alpha(opacity=50)" onmouseover="this.style.MozOpacity=1; this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5; this.filters.alpha.opacity=50" ></a>

Subscribe now via RSS feed and get all the new tutorials