3. Image Gallery

CSS Image Gallery

CSS can be used to create an image gallery.

Add a description of the image here

Image Gallery

The following image gallery is created with CSS:

Example

<html>

<head>

<style>

div.img

{

margin:2px;

border:1px solid #0000ff;

height:auto;

width:auto;

float:left;

text-align:center;

}

div.img img

{

display:inline;

margin:3px;

border:1px solid #ffffff;

}

div.img a:hover img

{

border:1px solid #0000ff;

}

div.desc

{

text-align:center;

font-weight:normal;

width:120px;

margin:2px;

}

</style>

</head>

<body>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</a>

<div class="desc">Add a description of the image here</div>

</div>

</body>

</html>

Try it yourself »