What is the standard practice for a mouse-over "highlight" of a picture that is under the cursor?

Question

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:

1. just an outline around it (maybe a blue box, etc.)
2. variation: a soft, feathered outline (sort of the "glow" effect)
3. 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?

Answer 1

Answering your question with a question

Most older browsers have, by default, a blue line around images with a link on them, turning purple once you've visited the link.

However, I suggest, you go for something lighter rather than something darker. This is because it's called a highlight. The name itself should suffice. However, you could get away with something darker too, because it isn't as much about making something highlighted, as it is about showing a difference between the photo (or any element really) you're hovering over, and the others.

It's about showing there's interaction by changing the cursor to a pointer and altering the appearance of the element you're hovering over.

So the question I'd love to counter with: what does your site look like?

Practical examples

There are so many options, it's ridiculous. If you were to read the CSS spec and then add your imagination, the possibilities are limitless.

That said, here are some practical ideas that you can work with:

• Make all the photos 20% transparent, and remove that attribute on hover to make them fully visible.
• Have a 4 pixel border underneath each photo, and change it's color from black to white on hover
• Give the photo a drop-shadow that falls onto all the other photos (possibly requires some z-index trickery)
• Use an inset shadow on the element to give it glowing borders

Some of these might not work properly cross-browser, without hacks, but that's where your imagination comes in to find alternative solutions.

Answer 2

If you can save the images with a transparent background (png), you could just change the color behind the photo. Otherwise, a border seems sufficient if set up properly to avoid jittering on hover.