/* CLASS Highlight Image onMouseover (Opacity)
The HTML:

<a href="http://www.cssdrive.com/" class="highlightit"><img border="0" src="test.gif"></a>
<a href="http://www.google.com/" class="highlightit"><img border="0" src="test.jpg"></a>

Highlight Image onMouseover (border)

The HTML:

<a href="http://www.cssdrive.com/" class="highlightit"><img border="0" src="demo.gif"></a>
<a href="http://www.google.com/" class="highlightit"><img border="0" src="demo2.gif"></a>
The CSS:

.highlightit img{
border: 1px solid #ccc;
}

.highlightit:hover img{
border: 1px solid navy;
}

.highlightit:hover{
color: red; /* Dummy definition to overcome IE bug */
}

*/
.highlightit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
}

.highlightit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}
/* Hasta aqui */
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 14px;
}

#navcontainer li { margin: 0 0 3px 0; }

#navcontainer a
{
display: block;
padding: 2px 2px 2px 20px;
border: 1px solid #333;
width: 100px;               /* en combinacion para mozilla */
width: expression('130px'); /* en combinacion para mozilla */
background-color: white;
background-image: url(images/bg_nav1.gif);
}

#navcontainer a:link, #navlist a:visited
{
color: darkblue;
text-decoration: none;
}

#navcontainer a:hover
{
border: 1px solid #333;
background-color: #F60;
background-image: url(images/l1_over.gif);
color: #333;

}

#active a:link, #active a:visited, #active a:hover
{
border: 1px solid #333;
background-color: #FF6600;
background-image: url(images/l1_over.gif);
color: #333;

}