Opacity Works, Just Not 1.0?

HTML & CSS
1

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">

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
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;
z-index:99;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 10px;
opacity:1.0;
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 */
}

</style>
2

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.

3

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.

4

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?

5

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


#content{
opacity:1.0;
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.

6

Yes, this worked. Thanks Paul.