Opacity Works, Just Not 1.0?

I have a png file I’m displaying on a popup under prices. When I set varying degrees of opacity, e.g. Opacity:0.2, it does work, but I don’t want any background showing and it’s currently doing that. I expect someone would tell me to simply use a jpeg, but then I can’t get the desired effect with the shadow, and any background-color:black, or any other color looks ugly.

Any other ideas?
The page is http://develop.pariscut.com/services-2/ and hover over the Prices box on the left to see the effect. I’m using a popup mechanism wherein the CSS is follows:

<style type="text/css">

position: relative;
z-index: 0;

background-color: transparent;
z-index: 99;

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: transparent;
padding: 0px;
left: -1100px;
visibility: hidden;
color: black;
text-decoration: none;

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 10px;
filter:alpha(opacity=100); /* For IE8 and earlier */

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -192px;
left:125px; /*position where enlarged image should offset horizontally */


Your bet bet would be to probably wrap that <img> that you use to display prices, in a <div> or a <span> and give that a solid background color, that way when the opacity works on hte image, it should just let the parents background show through.

Alas, no. The Prices image currently has <span> around it and adding style=“background-color:black” only changes the frame picture to a black area and STILL doesn’t suppress the background from showing through. I also tried <div> but that just made the entire picture show up directly on the page.

Content has an opacity set on it of .8

This means every single tag inside Content has 100% opacity-- which, for them, equals only 80%. To them, their ancestor’s .8 opacity is the most opaque anyone can ever achieve.

This is why setting a child to opacity: 1 doesn’t “fix” this… the child believes it’s already 1, or 100% of the 80%, because it is.

It’s hard to notice on most of your other elements, but it’s there.

You’ll need to absolutely rethink your setup.

Also: how can I see the prices with the keyboard?

For modern browsers you could use rgba instead of opacity and avoid the issue altogether.

background-color: #574130;
background-color:rgba(87, 65, 48, 0.8)

If you are using filters for IE8 and under (I didn’t check) then position:relative on the child will often stop the opacity affecting the child.

Yes, this worked. Thanks Paul.