Member Avatar for LogicWeb

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
  • 82 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ashishkumar_bhi
Member Avatar for ashishkumar_bhi

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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.