Putting it All Together - HTML5 with CSS3 - page 363

Listing 10-20. Creating a frame effect around product images
.product .product-img {
background-color: #fff;
padding: 4px;
border: 1px solid #fff;
display: block;
margin: 0 auto 1em;
}
a:hover .product-img,
a:focus .product-img,
a:active .product-img {
border-color: #fc0;
}
The auto value for the left and right margins will center the image in the box. Changing the border color
when the link state changes makes a double border effect, as you see in Figure 10-12.
Figure 10-12. The framed product image reveals a thin, colored border when a pointer hovers over it
The link wraps around the entire figure, including its title and description (in a figcaption element). That
mass of underlined text isn't especially pleasing to the eye, so we'll override the underline and link color for
these product URLs. However, the product name should still receive some text decoration when the link is
hovered or focused, so we can restore those styles in another rule for the name alone, further overriding
the previous override:
.product .url {
text-decoration: none;
color: inherit;
}
.product .url:hover .name,
.product .url:focus .name,
.product .url:active .name {
text-decoration: underline;
color: #1b46c3;
}