Previously, we looked at using CSS opacity to create some interesting effects. In this aricle we’ll be using the CSS opacity technique to create some interesting effects in a filmstrip.

To start with, let’s work from the assumption that all of our thumbnails are the same size and shape. For this example, thumbnails will be 140×100. This is of course, the kind of thing you could change in user preferences for a web app, but let’s start simple. So using a short strip of 3 pictures, we have some XHTML that looks like this.

<img src="/images/mythumb01.jpg"/><img src="/images/mythumb02.jpg"/><img src="/images/mythumb03.jpg"/>

But the first problem we see, of course, is that they are oriented vertically…. which is fine, but let’s try for a horizontal strip, shall we. In the bad old days we’d have done this in a table. I’m talking Netscape 4 days, here *shudder*. Moving quickly on, a good tip for whenever you want strict rows or columns of something is to use an unordered list and some CSS, like this:

<ul class="imageRow">
	<li><img src="/images/mythumb01.jpg"/></li>
	<li><img src="/images/mythumb02.jpg"/></li>
	<li><img src="/images/mythumb03.jpg"/></li>
</ul>

ul.imageRow {
	width: 450px; /*width of all of your images plus the margins/padding you use*/
	height:140px;
}

ul.imageRow li {
	float: left;
	display: block;
	padding: 7px;
	margin: 0px;
}

ul.imageRow li img {
	border: 0px;
	height: 100px; /* just incase the images are a different size */
	width: 140px; /* ditto */
	margin: 0px;
	padding:0px;
}

This will give us something like this:

What if you want to show a lot of images and, say, have the box scroll horizontally? The solution is to add a <div> with a width smaller than the <ul>.

div.filmstrip {
	overflow-x: scroll;
	overflow-y: hidden;
	height: 140px; /* give it enough space for the images and the scrollbar, if present */
}

<div class="filmstrip">
	<ul class="imageRow">
	.
	.
	.
	</ul>
</div>

Which gives us the following:

Now I promised using opacity as a way to highlight pictures, so here it is:

ul.imageRow li {
	float: left;
	display: block;
	padding: 7px;
	margin: 0px;
	opacity: 0.7;
	filter: alpha(opacity=70);
}
ul.imageRow li:hover {
	opacity: 1.0;
	filter: alpha(opacity=100);
}

This gives us:

Here are some other ways to add a highlight to the active picture:

ul.imageRow li {
	float: left;
	display: block;
	padding: 7px;
	margin: 0px;
	background-color: #fff;
}
ul.imageRow li:hover {
	background-color:#bef;
}

ul.imageRow li {
	float: left;
	display: block;
	padding: 7px;
	margin: 0px;
}
ul.imageRow li:hover {
	padding: 4px;  /* IMPORTANT: allows the 3px border to fill the gap so the element
				is the same size as before */
	border: 3px dashed red;
}

Going back to the opacity example, let’s change the background and add an image to give it that filmstrip feel.

div.filmstrip {
	overflow-x: scroll;
	overflow-y: hidden;
	height: 180px; /* give it enough space for the images and the scrollbar, if present (and the
				 filmstrip image) */
	padding: 0px;
	background-color: #000;
}

ul.imageRow {
	width: 1848px; /*width of all of your images plus the margins/padding you use*/
	height: 170px;
	background: url(/images/filmstrip.jpg) 0 0 repeat-x;
	padding: 25px 0px 25px 0px;
	margin: 0px;
}

We could have added the filmstrip background to the div instead of the list, but then the strip doesn’t appear to scroll. Sometimes that’s desirable, here it isn’t. Other things to note are that we’ve added padding to the top and bottom of the unordered list so the thumbnails now fit within the intended area.

Okay, but what about those ugly scroll bars? Well, In the next article we’ll look at some alternatives using Javascript and CSS positioning.