Take the 2-minute tour ×

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?

share|improve this question
4. Put an overlay in the corner of the image (e.g. a blue triangle in the top right corner). –  Michael Lai Aug 14 '13 at 23:28
if a website, I like how instagram does it, where it shows meta information and expands out the layout. Very clean but has a lot of information when desired. –  timpone Aug 15 '13 at 4:44

2 Answers 2

up vote 3 down vote accepted

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.

share|improve this answer
Another option: Move the object up (and maybe to the right) just a bit (5%) as if it "raised up". This effect is used on buttons at time. –  Clay Nichols Sep 11 '13 at 15:39
BEST OPTION (can't believe I never thought of this before): Transparent box on TOP of the image (Z order). So it doesn't mess up the "white background" (illusion of transparency). –  Clay Nichols Sep 11 '13 at 15:52

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.

share|improve this answer
A border behind them will ruin the illusion that (some) objects are really just on a white (not transparent) background. –  Clay Nichols Sep 11 '13 at 15:38

Your Answer


