How To Create an Image Gallery Using CSS3

This article will provide code snippets on how to make an image gallery using nothing but CSS3. This will be of particular use for sites that specialize in showing images, or for commerce sites that use thumbnail images of products and want the functionality of enlarging the images.

There are two variants of the demo: demo 1 and demo 2. While the variations are extremely similar, they do exhibit different characteristics. As we step through the code, those differences will be noted. The original author of this code is unknown. The site from which I discovered how to create this image gallery does not list the developer’s name.

Let’s get started with placing the images on the screen. This will be done simply by floating the images to the left. There will be four rows that contain four pictures each and will be set at 25% height and width. The borders are placed in a container through box-sizing.

Let’s Get to the CSS3 Example Code

a {
     float: left;
    width: 25%;
    height: 25%;
    position: relative;
    border: 1px solid #333;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Next, it’s time to set the image sizes to 100% with an absolute position and transition. You’ll notice that in the first variant of the demo, that the images appear greyed out. That is done through opacity, which is also a part of this code.

a img{
    display: block;
    width: 100%;
    height: 100%;
    -webkit-transition-property: width, height; /* we specify, what properties we need to change*/
    -webkit-transition-duration: 300ms; /* we specify, with what speed it is necessary to return an image in its initial look*/
    -moz-transition-property: width, height;
    -moz-transition-duration: 300ms;
    -o-transition-property: width, height;
    -o-transition-duration: 300ms;
    position: absolute;
    opacity: 0.3; /* add opacity*/
    cursor: pointer;
}

To provide a caption to the photos, you can use a pseudo element: after. The caption appears in the bottom right corner of each image. It should be obvious that you can update the content element to your own copyright or caption information.

a:after {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    content: “Studio.com”;
    color: #eaeaea;
    font-family: “Trebuchet MS”;
    font-size: 16px;
    opacity: 0.5;
}

Using the pseudoclass: focus, you can create the appearance of the image opening and enlarging. This only works with form fields and links, so an a tag is used. Because pseudoclass: focus does not currently work well in Chrome, the alternate solution is to add the index element to the link.

a:focus img{
    width: 250%; /* we increased an image to this size */
    height: 250%;
    position: absolute;
    opacity: 1; /* transparency is not needed */
    z-index: 1; /* for a photo to enlarge over all images */
    -moz-box-shadow: 0 0 15px 2px #000;
    -webkit-box-shadow: 0 0 15px 2px #000;
    box-shadow: 0 0 15px 2px #000; /* we add some beauty */
    -webkit-transition-property: width, height; /* we decrease the image */
    -webkit-transition-duration: 2s; /* we specify, with what speed it is necessary to increase an image */
    -webkit-transition-delay: 0.3s; /* as a browser will process it, before enlarging a photo */
    -moz-transition-property: width, height;
    -moz-transition-duration: 2s;
    -moz-transition-delay: 0.3s;
    -o-transition-property:width, height;
    -o-transition-duration: 2s;
    -o-transition-delay: 0.3s;
    cursor: default;
}

At this point, you should have a working gallery in terms of the CSS3 set up. However, at this point, all of your images will enlarge from the upper left corner to the lower right. This is corrected by using a pseudoclass nth child. This will change the behavior of where the image appears to enlarge from depending on where the image is positioned.

a:nth-child(4n+4) img, a:nth-child(4n+3) img{
    right: 0;
} /* every fourth element starting with 3rd and 4th will be enlarged from the right border of browser window */

a:nth-child(n+9) img{
    bottom: 0;
} /* all elements, starting with the ninth will begin to enlarge upwards */

Now to address how to close the images after they have been enlarged. The images are opened through focus and you can close them in the same manner. From the user perspective, the images will be closed by pressing an X (or by simply clicking on another image). Here’s some sample code on how to create the X, which is really a + rotated by 45 degrees.

-webkit-text-shadow: 0px 0px 5px #222;
-moz-text-shadow: 0px 0px 5px #222;
text-shadow: 0px 0px 5px #222;
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
cursor: pointer;

To finish, here’s the code for closing an image after it has been enlarged:

.closed{
    display: none;
}
a:focus~.closed{
    display: block;
}

This will also cause the X to close as well. Good luck with this sample code and hopefully you’ll be on your way to creating a CSS3 image gallery.