CSS Image Gallery 101

An image gallery is a feature that can be very useful for any website. Many commercial websites would benefit from having an excellent image gallery added to it. Many website owners and businessmen have discovered that the use of an image gallery can lead to better conversion and sales. That is why they have turned to its use.

Why a CSS Image Gallery Is Effective

The use of an image gallery can be beneficial because it allows potential customers and other users to view the available products so they can have an idea of what are things that they can buy there. Because of the gallery, they have a direct idea of what it is that they can buy from the site. For someone shopping online, that is very important feature.

Creating an Image Gallery

The first step that you have to take is to collect all of the images that you would be using for the gallery. To make sure that there would be no problems, you have to make sure that the images would be of the same sizes. To further simplify things you should also make sure that they are placed all in the same folder.

Creating the HTML List

The first step in creating the image gallery is to come up with a list of images on HTML. It has to be an ordered list. Now you just have to tweak it a bit using CSS. Here is a sample image gallery:

<html>
<head>
<style>
div.img
{
margin:3px;
border:2px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:2px;
border:3px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:130px;
margin:1px;
}
</style>
</head>
<body>
<div>
<a target="_blank" href="image_big.htm">
<img src="image_small.jpg" alt="Image" width="120" height="80">
</a>
<div>Add a description of the image here</div>
</div>
<div>
<a target="_blank" href="image2_big.htm">
<img src="image2_small.jpg" alt="Image" width="120" height="80">
</a>
<div>Add a description of the image here</div>
</div>
<div>
<a target="_blank" href="image3_big.htm">
<img src="image3_small.jpg" alt="Image" width="120" height="80">
</a>
<div>Add a description of the image here</div>
</div>
<div>
<a target="_blank" href="image4_big.htm">
<img src="image4_small.jpg" alt="Image" width="120" height="80">
</a>
<div>Add a description of the image here</div>
</div>
</body>
</html>

This would be a decent looking image gallery already. You can improve it even further by doing some additional changes.

CSS Image Sprites

There is another property in CSS that can be used when it comes to images. These are the image sprites. Image sprites are collections of images that are placed together. The use of multiple images on a single page would mean a great deal of time to upload since each image would represent a separate request to the server. By using an image sprite instead, there would only be a single request making a faster download time. The image sprite property could then be used in order to identify which part of the image would show.

The use of an image sprite would be useful in a navigation list.

These are just a few of the basic things that you should learn about images when it comes to CSS.

Separator image .