O'Reilly logo

CSS Cookbook, 2nd Edition by Christopher Schmitt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 3. Images

Introduction

When Marc Andreessen, founder of Netscape, allowed for the inline display of images back in the early 1990s, it helped kick start not only a global discussion, but added enticing visuals. Shared documents no longer were doomed to be text-laden academic papers allowing designers the initial foothold to begin the field of web design.

In this chapter, many recipes regarding CSS interactions with images are discussed. Recipes include dealing with borders, manipulating background images, rounding corners on boxes, replacing HTML text with images and much more.

Placing a Border Around an Image

Problem

You want to place a border around an image.

Solution

Use the border property on the img element (see Figure 3-1):

img {
 width: 300px;
 border: 6px double #666; 
 background: #fff;
 padding: 6px;
} 
A border is placed around an image
Figure 3-1. A border is placed around an image

Discussion

If you make an image a link, there’s a possibility of creating a more complex presentation with the border property. Using the :hover pseudo-class, the style of the border can be changed when a user rolls over the image (see Figure 3-2):

img {
 width: 30px;
 border: 4px double #666;
 background: #fff;
 padding: 4px;
}
a:hover img {
 border-style: solid;
 background: #999;
}
Combining background color with border styles creates an interesting rollover effect
Figure 3-2. Combining background color with border styles ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required