Websites always need good looking images and there are many ways a designer can make them look good. A problem I commonly run into is that when I have built a website with a CMS, when I hand the site over to the client they want to update the imagery, but can’t get it to look as nice.
Generally I do try to keep image decorations to a minimum, but sometimes that little bit extra can help bring an image to life. Features such as a simple border or subtle drop shadow can really enhance an image.
Similiarly with images that are hyperlinks, we can’t expect to use javascript to change the image on a rollover, or create a sprite for every single image. CSS can provide an alternative to this issue with simplistic image rollovers.
I have created examples of 6 different techniques achieved with CSS that can help to enhance your image.
1. Outside Border
2. Drop Shadow
3. Outer Glow
4. Outer Glow With Border
5. Rollover (Opacity)
6. Rollover (Outer Glow With Border)
Click here to view the source and see these examples is action.