Highlight Your Products: Add a border

If the main area of your store has a white background, the prodyct shots of your shirts may tend to blend in a little, and you may like to help them stand out a bit. The best and simplest way to do this is to add a border to the .productImage class in your CSS.

.productImage {border: 1px solid #000000;}

Each of the attributes controls the appearance of the border. The 1px is the line width of the border. The bigger the number, the wider the line around the productImage.

The solid is the style of border. This can be one of the following values:

  • none
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset

Finally, the #000000 is the color. This can be set to any hex color or a color name, eg white, black, blue, red,etc.

Some examples of what is possble are (l to r - ridge, double, inset)

The fancier borders such as inset, outset, groove, ridge and double all look best with a minimum width of 3px.

Setting a border on hover

If you want to get a bit trickier, it is possible to set the border to change when someone hovers their mouse of the image. To do this, you will need to add the following line of CSS:

a:hover img.productImage{border: 4px inset red;}

Of course, you can set the attributes on this as well. Experimet a little, however it can look quite good if your hover stat is the opposite of yoor normal state. Eg inset / outset or ridge / groove.

23.11.2007. 05:36

This article hasn't been commented yet.