• 200701 Mar

    My client wanted a page showing photographs of all their staff, and the design called for them to be semi-opaque against the page background, going fully opaque on mouseover, like so:

    opacity.png

    What would be the best way to do this?

    One would be to make an image sprite of the images two states:

    opacity_sprite.png

    And use it as background-image on the element, swapping to the other state on :hover. One small problem with this is that IE6 only supports :hover on the a tag; another is that because the results are being pulled from a database, you’d have to write a dynamic stylesheet as well, to call the swap on all staff photos.

    Another option would be to create two separate images of the original, one for each state, and write a Javascript function to swap them over on mouseover.

    There are other solutions as well, but none of them are the best way; the best way is to place them in the page with img, then use the CSS3 opacity declaration for the switch, as so:

    img { opacity: 0.6; }
    img:hover { opacity: 1; }

    Two short lines of code, much quicker, the same effect without any of the hassle.

    As with the rest of CSS3, however, one big drawback: no native support in the IE family. It works on just about every other major browser, however.

    You can skip to the end and leave a response.


  • Comments

Hosting by: