Css Opacity Trick?

Discussion in 'CSS' started by le007, Sep 11, 2008.

  1. #1
    Hi all,
    Does anyone know how to get this affect using opacity? I know how to have all the images faded and highlighted to colour when hovered but here its the opposite - any suggestions?
    Thanks,
    Le007

    http://www.sikker.com.ar/
     
    le007, Sep 11, 2008 IP
  2. Divisive Cottonwood

    Divisive Cottonwood Peon

    Messages:
    1,674
    Likes Received:
    35
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I can't say I've used opacity before but have a read of this guide. This seems to describe what you are trying to achieve:

    http://www.css3.info/on-opacity-and-complexity/

    Opacity does not work in Internet Explorer though so you'll need to find a javascript workaround for that browser.

    (Add: Reading it properly it won't achieve the example that you set, but the css3.info website will give you a give run down of CSS3 including opacity)
     
    Divisive Cottonwood, Sep 12, 2008 IP
  3. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #3
    Heh, thanks for the reply - yep there was something interesting reading there, although css3 isn't supported in IE. Normal css opacity does work in IE though, check this out.
    http://www.mandarindesign.com/opacity.html
     
    le007, Sep 12, 2008 IP
  4. mypsdtohtml

    mypsdtohtml Guest

    Messages:
    96
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    This is the class for a opacity:

    .opaque {
    opacity: .5;
    filter: alpha(opacity=50);
    }
     
    mypsdtohtml, Sep 17, 2008 IP
  5. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #5
    Thanks - yep thats the class I use for opacity.
     
    le007, Sep 17, 2008 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Huh I just thought of something... in the two-box scenario, possibly the hovering over the anchors who are not children would stop the hover effect of the big div. Didn't think of that before.

    Which means that, even though big div and the group of anchors still need to be siblings and not parent-child, they ultimately have to have a parent... so, the hover would need to go on THAT.

    <parent>
    <bigdiv> (has single large background image)
    </bigdiv>
    <anchorbox>
    has anchors
    </anchorbox>
    </parent>

    parent :hover bigdiv { (note the space, it means if anything inside parent is hovered)
    opacity: 0.5;
    and moz and IE lines here;
    }
    parent anchorbox #specificnameofanchor:hover {
    background: newbackground.gif pos pos no-repeat;
    }

    Otherwise, if no mention of parent, then simply having the bigdiv and anchors being siblings with anchors pulled on top of bigdiv wouldn't work because as soon as one of the anchors is hovered over, bigdiv becomes unhovered and thus the opacity goes back to default.

    Y'know if I wasn't spending my free time helping airbag guy, I'd see if I could whip up a demo of this, cause it would answer a lot of questions I've started to have about opacity.

    Hmmm, I wonder if I can imitate that sikker site for our kid site... make a funky image menu...
     
    Stomme poes, Sep 18, 2008 IP