Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: Image Hover Event - How'd They Do It?

Bottom of Page

1 to 9 of 9

  1.  
    • CommentAuthorgozongcss
    • CommentTimeFeb 23rd 2006 edited
     permalink
    Hey - check this out:

    http://www.albinoblacksheep.com/image/

    Hover over the links next to the icons. See how the image gets brighter? I've taken a look at the CSS and can't figure out how they are doing it. Anyone know?
    •  
      CommentAuthorJohnRiv
    • CommentTimeFeb 23rd 2006 edited
     permalink

    This is the CSS that is creating that effect:



    a img {
    filter:alpha(opacity: 60);
    -moz-opacity: 0.6;
    opacity: 0.6;
    }

    a:hover img {
    filter:alpha(opacity: 100);
    -moz-opacity: 0.99;
    opacity: 0.99;
    }
    • CommentAuthorgozongcss
    • CommentTimeFeb 23rd 2006
     permalink
    Cool - that totally makes sense. Thanks!
  4.  permalink
    Cool, is that a recommended method? I've just never seen it before. It does work in IE and FF but is there any reason not to use it?
    •  
      CommentAuthorJohnRiv
    • CommentTimeFeb 23rd 2006 edited
     permalink
    It doesn't work in Opera, so that's a reason not to use "opacity" (for now at least... it is part of the CSS Level 3 Candidate Recommendation so maybe in 10 years you can use it with no worries)

    If you do decide to use "opacity", check out this page for some usage tips: http://www.quirksmode.org/css/opacity.html
    • CommentAuthormatthewv
    • CommentTimeFeb 23rd 2006
     permalink
    Using the -moz-opacity value causes your css not to validate, if your worried about validation then I would not use this method

    But if that doesnt concern you then go right ahead!
    • CommentAuthordpelletier
    • CommentTimeFeb 23rd 2006
     permalink
    Why not just use 'opacity' versus using '-moz-opacity'
    As far as I'm aware its not longer part of the '-moz' testing phase.
    That way it will work in the future as more browsers implement it, and it's not like your losing out on functionality if they can't see the opacity change.
    •  
      CommentAuthornifkin
    • CommentTimeFeb 23rd 2006
     permalink
    Using the -moz-opacity value causes your css not to validate, if your worried about validation then I would not use this method

    Having a rule in there with more than one colon in it (like, oh, filter:alpha(opacity: 100); ) isn't valid either. But it's pretty much the same kettle of fish.
  9.  permalink
    Opera 9 will support opacity so use it to enhance if you want.

    http://nickpresta.ath.cx/source/testOpacOpera.html

1 to 9 of 9

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page