I'm displaying several photographs. The user then selects (clicks) on one of them. I'd like to have a mouse-over highlight of the one they are "on".
The photographs :
- are on a background the color of the screen so they look like an "object" on the screen (like a hammer sitting on the screen).
- Vary in the size of the "object" b/c some have more white space, some have none. For this reason I favor solution #3 (below).
- background varies EDIT: Some are on a transparent background, some are on white. (The page background is white so those look the same but if you do something like put a "glow" behind them, they'll look different and it'll ruin the illusion that all the objects are on a transparent background.
Some options I've considered are:
- just an outline around it (maybe a blue box, etc.)
- variation: a soft, feathered outline (sort of the "glow" effect)
- Make that photo "brighter" or even recolor it (not sure how hard that is).
Any other options that are relatively easy to implement in HTML5/CSS3 ? Any opinions on which of the above three are better than the others?