SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    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:

    Code:
    <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. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    #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. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    For modern browsers you could use rgba instead of opacity and avoid the issue altogether.

    Code:
    #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. #6
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    97
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yes, this worked. Thanks Paul.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •