SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Feb 2008
    Location
    Marin County, California
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Disjointed Rollover - Opacity on background

    Greetings,
    I have a Disjointed Rollover bring up a text box in a different location. I would like to have the background at about 35% opacity to allow for the picture underneath to show through.

    Does anyone know the CSS code to do this?

    Here is my code:
    .product a{position:relative;}
    .product a span{
    visibility:hidden;position:absolute;
    top:-40px;
    left:180px;
    width:550px;
    padding:0px;
    background:#829900;
    color:#fff;
    border:2px inset green;
    }
    .product a:hover{visibility:visible}
    .product a:hover span{visibility:visible;}

    Thanks for your time
    AEVideoWeb

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi

    I'd probably need to see the whole code to give a working example but you should be able to add opacity with this:

    Code:
    .product a span{
     /*opacity for IE5+*/
      filter: alpha(opacity=35);
      /*opacity for older Mozilla browsers*/
      -moz-opacity: 0.35;
      /*opacity for mozilla/safari*/
      opacity: 0.35;}
    I have a similar demo here but in reverse.

    http://www.pmob.co.uk/temp/disroll-opacity.htm

    Hope it helps

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Be aware that any text in the span will also suffer from opacity. If that's a problem then you would need to use a transparent png image instead and use the alpha image loader for IE.

  4. #4
    SitePoint Member
    Join Date
    Feb 2008
    Location
    Marin County, California
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Disjointed Rollover - Opacity - Thank you

    Hi Paul,
    Thank you for both your offerings on this topic. Your code worked perfectly and did exactly what I was looking for. In your first response you mentioned the possible low opacity of the text as well, which you are correct. So I took your advice and made a .png with the opacity and used it as a background in the code. With a little tweaking of the width, height, background-repeat=none, etc., it works great.
    Thank you so much
    If you want to take a look, www.gabyscake.com/supplies.shtml. Click 'Cake Decorating Stands'. It's the first rollover.

    Thanks again
    AEVideoWeb

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Glad you got it working

    If you want it to be transparent in IE6 you will need to apply the alpha image loader to the image. Here is an old example that shows how to do it.

    http://www.pmob.co.uk/temp/transparent-test.htm

    You need to hide the original background property from IE6 and just give it the filter, hence the 2 rules (child selector hides from ie6 and under and the * html selector provides code only to ie6 and under).

    Hope that's of some use.


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
  •