Fancy Interactive Pure CSS List Boxes with Hover Effect

There was an urgent need to expand the product gallery for the Nature’s Carpet website I built last fall. More specifically they were asking for the ability to easily update and ad new carpets with info and pictures. The info would be fairly minimal (name, product number, some short details) and the most important aspect would be the ability for the visitors to see high quality photos of the carpets as surfed through without having to open new windows etc. In accordance with my new found obsession with standards based code and CSS, I decided that this could be an interesting challenge: Could I make a tableless product gallery with pop-up images triggered by roll-over behaviours and some other fancy effects while still keeping all the info in an unordered list? Well, after some trial and error, the answer is yes. And here’s how it’s done (I actually did all the styling in Expression Web using the Modify Styles functions, but for brevity (and those of you who don’t use Expression Web) I am just going to list out the actual CSS code here):

From idea to reality

One of the challenges with the Nature’s Carpet site is that it will be constantly updated by the company itself. Would be easy if the backend was a CMS, but as of now it’s not so it is done manually. The tricky part was to make the code as fool proof as possible without making the site bland and uninteresting. I had this idea of having each carpet represented by a small rectangle with a thumb nail on top and the name and info underneath. When the visitor hovered over the rectangle, the background colour should change, and when she hovered over the image, a larger one should pop up automatically without having to do anything.

Step 1: Make a list

The most fool proof thing I could think of was a simple unordered list. And that’s easy enough:

Aureg - Bracken
Berber loop PIle

Problem is an unordered list looks like an unordered list. What I wanted was something that looked like a 3 column table.

Step 2: Wrap the list items in a box

To keep the list styles separate from the rest of the list items in the page, everything needs to be wrapped in a box.I call it showcaseWrapper:

#showcaseWrapper {
}

All the content in each unordered list item should also be wrapped in it’s own box. Since there are several lists, it has to be a class rather than an id:

ul.showcaseList {
padding: 0px;
margin: 0px;
list-style-type : none;
}

This strips away the regular spacing and elements featured in an unordered list. Now the list items themselves:

ul.showcaseList li {
margin: 0 4px 8px 4px;
border: 1px solid #D1CAC2;
width: 165px;
height: 200px;
background: #FFFFFF;
float : left;
display : inline;
}

Pretty straight forward: The margins are used to space the boxes evenly. Each box has a solid grey stroke and a white background. They float to the left and line up side by side rather than on top of each other. Take special note of the “width” and “height” numbers: They are not flexible because I want the items to line up nicely. These values match the content displayed perfectly and fills out the space nicely. Depending on what you want to put inside your boxes, you can change them. I would advice against making the height dynamic because if one box is taller than the rest, the order becomes disorder and the whole thing becomes a big mess.

Step 3: Make a Hover Effect

I also wanted the boxes to react to the mouse hovering over them to give the visitor a more interactive experience. This is surprisingly easy: Just ad a “hover” stage to the list item with some different info like this:

ul.showcaseList li:hover {
margin: 0 4px 8px 4px;
border: 1px solid #D1CAC2;
width: 165px;
height: 200px;
background: #E7E2DE;
float : left;
display : inline;
}

Notice that the only difference is the background colour. You could make it more fancy by using a graphic background and the sliding doors technique like Verlee did. Or you could make the entire list item into a link. The posibilities are endless.

Step 4: Style the Content

Now it’s up to you to style the content as necessary. Since everything is wrapped in the showcaseWrapper id, you can safely style everything within the wrapper without it affecting the rest of your site. Here are a couple of examples:

#showcaseWrapper ul.showcaseList img {
padding: 6px 7px 3px 7px;
}

#showcaseWrapper ul.showcaseList h3 {
margin: 0px 10px 0px 10px;
color: #666666;
display : block;
text-decoration : none;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bolder;
font-style: oblique;
text-transform: uppercase;
height: 2.6em;
}

Final HTML Markup

Aureg - Bracken
Berber loop PIle 

Final CSS

/* The box that wraps the entire list /*

#showcaseWrapper {
}

/* Styles for text not contained in the lists  */

#showcaseWrapper h2 {
color: #666666;
font-size: 1.2em;
text-transform: uppercase;
margin-left: 5px;
margin-top: 0px;
clear: both;
}

#showcaseWrapper p {
padding : 10px;
clear : both;
}

#showcaseWrapper a {
color: #5F8C00;
}

#showcaseWrapper a:hover, #showcaseWrapper a:focus, #showcaseWrapper a:active {
color: #3D5900;
text-decoration : none;
}

/* The list itself  */

ul.showcaseList {
padding: 0px;
margin: 0px;
list-style-type : none;
}

/* Turning each list item into a box and stacking them sideways */

ul.showcaseList li {
margin: 0 10px 8px 4px;
border: 1px solid #D1CAC2;
width: 165px;
height: 200px;
background: #FFFFFF;
float : left;
display : inline;
}

/* The hover effect for the list box  */

ul.showcaseList li:hover {
margin: 0 4px 8px 4px;
border: 1px solid #D1CAC2;
width: 165px;
height: 200px;
background: #E7E2DE;
float : left;
display : inline;
}

/* Styles inside the list boxes */

#showcaseWrapper ul.showcaseList h3 {
margin: 0px 10px 0px 10px;
color: #666666;
display : block;
text-decoration : none;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bolder;
font-style: oblique;
text-transform: uppercase;
height: 2.6em;
}

#showcaseWrapper ul.showcaseList p {
font-size : 0.9em;
padding : 0;
margin: 5px 10px 10px 10px;
}

/* Padding the image */

#showcaseWrapper ul.showcaseList img {
padding: 6px 7px 3px 7px;
}

Here again is the final result. And yes, it validates (provided the client didn’t mess with the html code).