Image Grid

Trolltunga Norway
Description of the image
Forest
Description of the image
Northern Lights
Description of the image
Mountains
Description of the image
Trolltunga Norway
Description of the image
Forest
Description of the image
Northern Lights
Description of the image
Mountains
Description of the image
Trolltunga Norway
Description of the image
Forest
Description of the image
Northern Lights
Description of the image
Mountains
Description of the image

HTML

<div id="image_grid_container"> <!-- Grid Container --> <div class="gallery"> <img src="beach_image_grid.png" alt="Trolltunga Norway" width="300" height="200"> <!-- Image within the grid --> <div class="desc">Description of the image</div> <!-- Image Description --> </div> <div class="gallery"> <img src="beach_image_grid.png" alt="Forest" width="600" height="400"> <!-- Image within the grid --> <div class="desc">Description of the image</div> <!-- Image Description --> </div> <div class="gallery"> <img src="beach_image_grid.png" alt="Northern Lights" width="600" height="400"> <!-- Image within the grid --> <div class="desc">Description of the image</div> <!-- Image Description --> </div> <div class="gallery"> <img src="beach_image_grid.png" alt="Mountains" width="600" height="400"> <!-- Image within the grid --> <div class="desc">Description of the image</div> <!-- Image Description --> </div> <div class="gallery"> <img src="beach_image_grid.png" alt="Trolltunga Norway" width="300" height="200"> <!-- Image within the grid --> <div class="desc">Description of the image</div> <!-- Image Description --> </div> <div class="gallery"> <img src="beach_image_grid.png" alt="Forest" width="600" height="400"> <!-- Image within the grid --> <div class="desc">Description of the image</div> <!-- Image Description --> </div> <div class="gallery"> <img src="beach_image_grid.png" alt="Northern Lights" width="600" height="400"> <!-- Image within the grid --> <div class="desc">Description of the image</div> <!-- Image Description --> </div> <div class="gallery"> <img src="beach_image_grid.png" alt="Mountains" width="600" height="400"> <!-- Image within the grid --> <div class="desc">Description of the image</div> <!-- Image Description --> </div> <div class="gallery"> <img src="beach_image_grid.png" alt="Trolltunga Norway" width="300" height="200"> <!-- Image within the grid --> <div class="desc">Description of the image</div> <!-- Image Description --> </div> <div class="gallery"> <img src="beach_image_grid.png" alt="Forest" width="600" height="400"> <!-- Image within the grid --> <div class="desc">Description of the image</div> <!-- Image Description --> </div> <div class="gallery"> <img src="beach_image_grid.png" alt="Northern Lights" width="600" height="400"> <!-- Image within the grid --> <div class="desc">Description of the image</div> <!-- Image Description --> </div> <div class="gallery"> <img src="beach_image_grid.png" alt="Mountains" width="600" height="400"> <!-- Image within the grid --> <div class="desc">Description of the image</div> <!-- Image Description --> </div> </div>

CSS

div.gallery { margin: 5px ; border: 1px solid #ccc; float: left; width: 22em; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: 10em; } div.desc { padding: 15px; text-align: center; font-family: Arial; }