Opacity

[king arthur]

On my page I have some thumbnail photos. I have an overlay div which I position near the thumbnail on an onmouseover event, inside this div is the full size photo and some text. I thought it would look nice if I made the div slightly transparent using opacity, and it does - but I can't get the photo to lose the opacity. I've tried just setting the opacity property back to opaque in the local style setting for the img tag, I've tried putting another div around it and setting that to opaque, I've tried setting it explicitly in the javascript function that positions the overlay and sets the img's src property, but it just doesn't seem to want to lose the opacity value that I've given the containing div. Is it not possible to do this?

 

For example I have:

<div id="overlaybox" style="color:black;background-color:white;position:absolute;top:0px;left:0px;filter:alpha(opacity=80);opacity:.80;z-index:10;text-align:center;width:100px;height:100px;margin:0px;padding:20px;visibility:hidden;">
<img id="overlay_img" src="blah" alt="Blah" style="filter:alpha(opacity=99);opacity:1.0;" />
</div>

 

and the img just ignores its own style setting and inherits it from the overlay div seemingly no matter what I do.

[soycharliente]

Use the :hover property and ....

 

USE AN EXTERNAL .CSS FILE!!! How in balls can you read all that?

[king arthur]

Hover property? I don't see how that relates to my problem, please explain.

 

I put styles inline while I am developing a page, it's only after all styles are set for good that it's worth moving them to an external sheet.

[soycharliente]

http://www.charlieholder.com/opacity.html

 

View source.

[king arthur]

Ok now try putting a containing div around that image element, and set the opacity of the div to one value and see if you can set the opacity of the image independently of that. Because that is what I am having a problem doing. Nothing to do with hover properties as my img is not a link.

[soycharliente]

What exactly are you trying to do? I re-read your original post and can't figure it out.

 

I suggested using hover beacause I thought you wanted it to change when you moused on and off.

 

Why can't you just make the images a dead link?

[king arthur]

Ok I'll explain it again.

 

I have an overlay that appears when you move the mouse over a thumbnail picture. The overlay shows you the full size picture along with some text.

 

This overlay consists of a div which is positioned absolutely relative to the document body. I position it by finding the offset position of the thumbnail and adding that with a certain amount of offset etc to the div's style.left and style.top properties. Inside the div are the img, and some spans of text.

 

Now, that all works fine. I don't need to know how to make the div appear and so on, that's all done.

 

I just wanted to make it look nicer by having the div translucent, by setting its opacity to 0.8. Well that works fine too, so I get a slightly faded white box on a black background, with some of the text and so on underneath showing through slightly. That's the effect I want.

 

But a side effect, that I can't seem to get rid of, is that the img within the div also has opacity 0.8, even if I try to set it to 1.0. No matter how or where I set the opacity of the image, it still refuses to take on anything other than the opacity value of the div that contains it.

 

That is what I need help with.