Transparent box (div) with images(as links) -- proportionally resizable? - css

Question

This is actually a two part question. so I have this transparent div element floating over a background image, what I want is to have images(as links) inside the box. But not transparent. I have the transparent box but I can't seem to figure out how to make the contents not transparent, because I would also like those images(as links) within the box to scale proportionally to the web browser. my css so far is this:
#menu
{
position:absolute;
top:13%;
left:3%;
width:25%;
height:20%;
background-color:#ffffff;
filter:alpha(opacity=60);
opacity:0.6;
-moz-opacity:0.6;
-khtml-opacity: 0.6;
}
#work img
{
position:absolute;
margin: 2% 29%;
height:33%;
}
#infocontact img
{
position:absolute;
margin: 33% 29%;
height:33%;
}
#store img
{
position:absolute;
margin: 66% 29%;
height:33%;
}
and my html is this
<div id="menu">
<div id="work">
<img src="work.gif" /> </div>
<div id="infocontact">
<img src="info.gif" />
</div>
<div id="store">
<img src="store.gif" /></div>
</div>
so what I have now is those gif images scaling with the height (and subsequent width) of the browser. and what im trying to do is have those images scale with the scale of the box as well. so if for some reason you make the browser pretty small, the images dont stick out past the smaller transparent box.
i know its gotta be possible, i just cant figure out the right combination of css/html to make it work.

Answer 1

The CSS:
.pic1
{
position:absolute;
width:10%;
thisistheexactwidthofitscontaineralwaysinpercentmax-width:110px;
}
img.scaled,.scaled
{
width:100%;
}
The HTML:
<div class="pic1"><img class="scaled" src="images/yourpic.png" alt="" title="">
</div>
Give the image a higher zindex than its container and apply the link to the image, not the container.
Also, for scalable images, use the width attribute. Assign the width of the container in respect to its position in the flow of your page, and the img and .scale width to 100%.
You may have to play with the size of the container to get it proportional, but it's a query free solution and works well except for scaling down png images with transparent backgrounds.