call us now!

08 9459 5730

0402 142 559

Cheap web design services in Perth! Your local web designer in Perth. Quality low cost web design that you can afford.

CSS Image Gallery

In this tutorial, I am going to show you how to create an image gallery for your website. This is a static image gallery not a lightbox image gallery. We are going to create four images in a row and all images will be floating to the left using CSS float property - float:left.

First, we need to create our HTML class division for the image gallery then style this class division with CSS. Inside this HTML class we will have the image tag and an image caption.

The HTML class division for the image gallery

<div class="my-image-gallery">
<img src="images/gal1.png" alt="gallery" width="200" height="133" />
<p>Image caption - gallery 1</p>
</div>

<div class="my-image-gallery">
<img src="images/gal2.png" alt="gallery" width="200" height="133" />
<p>Image caption - gallery 2</p>
</div>

<div class="my-image-gallery">
<img src="images/gal3.png" alt="gallery" width="200" height="133" />
<p>Image caption - gallery 3</p>
</div>

<div class="my-image-gallery">
<img src="images/gal4.png" alt="gallery" width="200" height="133" />
<p>Image caption - gallery 4</p>
</div>

CSS Codes

.my-image-gallery
{
         float:left;
         width:200px;
         height:auto;
         margin:10px 10px 15px 10px;
}

First we float all images to the left, the width of the container is 200px, height auto (you can set a fixed height), then we put margin top 10px, margin right 10px, margin bottom 10px and margin left 10px. This is a very simple image gallery.

You can style the box the way you want it. You can put borders around the image and you can even put round corners to the image using CSS3 border-radius property.

Here is our image gallery