0

I'm looking to set a 128px x 128px image as background with default opacity to.30 and hover to .70

I cannot get this working right. Current code is:

/********** POPUP RADIO ***********/

div#Navigation{
height:96px;
width:96px;
}
div#Navigation ul{
list-style:none;
padding:0;
}
div#Navigation ul li{
display:block;
text-align: right
height:96px;
width:96px;
background:url(images/radio.png) center top no-repeat;
-moz-opacity:.30; filter:alpha(opacity=30); opacity:.30;
}
div#Navigation ul li:hover{
display:block;
background:url(images/radio.png) center top no-repeat;
-moz-opacity:.50; filter:alpha(opacity=50); opacity:.50;

}

And html link

<div id="Navigation" style="float:right">
<ul>
<li><a href="javascript:void(0);" onclick="popupwindow('http://www.somedomain.com/misc.php?do=page&template=radio', 'myPop1',215,345);">Navigation</a></li>
</ul>
</div>
2
Contributors
1
Reply
2
Views
5 Years
Discussion Span
Last Post by ashishkumar_bhi
0

Give a id to the background image you want to adjust opacity. Following code works for me
CSS code

#image{
        opacity:0.3;
        filter:alpha(opacity=30);
        }
#image:hover{
        opacity:0.7;
        filter:alpha(opacity=70);
        }

where image is is id for the background image
HTML Code

    <ul> 
        <li style="background-image:url('path');height:60px;" id="image"></li>
    <ul>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.