How to Create CSS Image Galleries in Responsive Websites

Note that this post was written several years ago, before CSS3.

Last Updated Please share our content if it is helpful

When we created a responsive website for a customer and tried to convert our old CSS image gallery, there were no instructions out there to help. So we experimented and found something that works on all major browsers (IE8 onwared, Firefox, Chrome, Opera and Safari) as well as our Nokia mobile and Apple iPad tablet.

As this image gallery is CSS-based, you have total flexibility – have as many images as you wish, as large as you wish and position both the thumbnails and the images wherever you wish.

Another big advantage of using CSS rather than a plugin or jquery scripts is that you do not slow down your site loading time.

A single line in the header is enough to overcome the on-click problems normally associated with hover images on touch devices such as tablets and mobiles.

Optionally, additional CSS3 techniques can be used to create interesting transition effects.

responsive-css-image-galleries


A working example of a responsive CSS image gallery – complete with CSS3 transitions – can be seen on our Portfolio page. A complete set of CSS and HTML can be found at the bottom of this page.

The instructions below assume that you already have a working responsive website in place and just need to know how to make a CSS image gallery work within this website.

Step 1: Create the HTML

1A  Set your containing Divs:

<div id=”gallerysection”>
<div class=”gallerycontainer” >

1B  Create a filler image – this image can be transparent (or textured as you prefer) and is one of the keys to getting a responsive CSS image gallery.

In CSS image galleries, the thumbnail images have to be given an absolute positioning in order to make the hover images work properly; as absolutely positioned images cannot affect the height of the containing div, we need to create a filler image (which is the same height or taller than the other thumbnails and the same width as the containing div when the image gallery is displayed at normal screen size). We give this filler image a relative position so that, as this image scales up and down, so the containing divs will scale up and down in height. Even though we size this image (using a tool such as Photoshop) so that the gallery looks right at normal resolution, the beauty of this approach is that the image will size up or down as the screen size changes – and your thumbnails (and their hover images) will also scale up or down.

<img class=”filler” src=”images/filler.png” alt=”” width=”100%” />

1C  For each image, you need to set the width of the thumbnail and hover image to 100% and then add any text (if any) that you want to appear underneath the hover image:

<a class=”thumbnail item1%u2033 href=%u201D#thumb”>
<img alt=”” src=”image1.jpg%u201D width=%u201D100%” />
<span>
<img alt=”” src=”image1.jpg%u201D width=%u201D100%” />
Text to display under hover image
</span>
</a>

1D Close your divs.

</div>
</div>

Step 2: Some CSS

Set the CSS for your Divs and filler image:

#gallerysection {position: relative; width: 100%; }
.gallerycontainer{position: relative; height: auto; width: 100%; }
.filler {width: 100%; z-index: 1; position: relative; }

Note that the divs and filler image all have relative positioning; the filler image must have a lower z-index than the images in the CSS image gallery.

Step 3: The CSS for the Thumbnails

Set general CSS for the thumbnails:

.thumbnail img{border: 0px; margin: 0 0px 0px 0; padding: 0 0 0 0; }

Position each thumbnail absolutely within the div using %; set the width using % of the containing div. Ensure that the z-index of these images is greater than the z-index of the filler.

.item1 {position:absolute; top: 3%; left: 3%; width: 10%; z-index: 2; }
.item2 {position:absolute; top: 3%; left: 15%; width: 10%; z-index: 2; }

Step 4: The CSS for the Hover Images

General CSS for enlarged hover images

.thumbnail:hover {background-color: transparent; }
.thumbnail:hover img{border: 0px; }
.thumbnail span {position: absolute; padding: 0%; left: -1000px; border: 0%; visibility: hidden; }
.thumbnail span img {border-width: 0%; padding: 0%; }
.thumbnail:hover span {visibility: visible; z-index: 50; }

CSS for each enlarged hover image

.item1:hover span {position: absolute; width: 300%; top: 110%; left: 0%; z-index: 50;}
.item2:hover span {position: absolute; width: 300%; top: 110%; left: -114%; z-index: 50;}

Note that the width of the hover image in this example is set to 300% of the size of the thumbnail image; by making it a % of the thumbnail, the hover image sizes up and down as the thumbnail changes with the div width.

Step 5: Hover Images on Touch Devices

One of the problems with creating hover-based responsive CSS image galleries is that devices such as iPads / tablets and mobiles work on TOUCH rather than hover. When I first started experimenting with these image galleries on our Apple iPad tablet, I found that, once a thumbnail had been clicked on, it was impossible to get rid of the larger hover image – you could click on another image and exchange one large hover image for another, but you could not get back to the pre-click, no-hover-image-displayed state.

A few lines in the Head section neatly solves this problem and enables our iPad/tablet and also our mobile to display these hover image galleries on TOUCH/CLICK (rather than on hover) but to go back to the normal PRE-TOUCH/CLICK screen when a different part of the screen is clicked:

<script>// <![CDATA[
document.addEventListener(“touchstart”, function(){}, true);
// ]]></script>

Note that this script also solves the problem of the menus hanging on the screen if the user presses the menu button by mistake – as with images, the user can now click elsewhere and the menu will collapse back.

Step 6: Breakpoints

This is optional. If, for example, you decide that the thumbnails are too small when viewed on a tablet or mobile, you could write a new set of rules using media queries; you can also reduce the number of thumbnails in a row and change the size of any text. The HTML code stays the same and the CSS is used to work your wonders.

@media screen and (max-width:768px) {
Revised CSS for devices less than 768px wide goes here
}
@media screen and (max-width:480px) {
Revised CSS for devices less than 480px wide goes here
}

So there you have it: CSS-based image galleries that can be used in responsive websites without the need for loading in slow JavaScript files. They look good on PCs, tablets and mobiles and are easy to adapt. With a working knowledge of CSS, I have been able to create pretty much the same variety of image galleries that I used before turning to RWD. Enjoy.

Complete CSS and HTML Code

<div id=”gallerysection”>
<div class=”gallerycontainer”>
<img class=”filler” style=”left: 0px; top: 0px;” src=”giller.pngg” alt=”” width=”100%” /><!–relative image gives height to div –>
<a class=”thumbnail item1″ href=”#thumb”> <img src=”image1d.jpg” alt=”” width=”100%” /><img src=”image1-large.jpg” alt=”” width=”100%” />Optional caption</a>
<a class=”thumbnail item2″ href=”#thumb”> <img src=”image2.jpg” alt=”” width=”100%” /><img src=”image2-large.jpg” alt=”” width=”100%” />Optional caption</a>
<a class=”thumbnail item3″ href=”#thumb”> <img src=”image3.jpg” alt=”” width=”100%” /><img src=”image3-large.jpg” alt=”” width=”100%” />Optional caption</a>
<a class=”thumbnail item4″ href=”#thumb”> <img src=”image4.jpg” alt=”” width=”100%” /><img src=”image4-large.jpg” alt=”” width=”100%” />Optional caption</a>
<a class=”thumbnail item5″ href=”#thumb”> <img src=”images5.jpg” alt=”” width=”100%” /><img src=”image5-large.jpg” alt=”” width=”100%” />Optional caption</a>
</div>
</div>

/*CSS for Containing Divs */

#gallerysection {position: relative; color: #cc0000; z-index: 1; width: 100%; }
.gallerycontainer{position: relative; height: auto; width: 100%; z-index: 96; }
/*CSS filler image – filler is given a relative position in order to give height to the div – using a tool such as Photoshop, its height (which sets the height of the div) is fixed and its width is set to the width of the containing div when displayed ; filler can be transparent or not as you choose */
.filler {width: 100%; z-index: 1; position: relative; }
/*General CSS for Thumbnails */
.thumbnail img{border: 0px solid #cc0000; margin: 0 0px 0px 0; padding: 0 0 0 0; }
/*CSS for positioning each thumbnail absolutely; ensure item1-5 have higher z-index than the filler image so they will display */
.item1 {position:absolute; top: 3%; left: 0%; width: 18%; z-index: 10;}
.item2 {position:absolute; top: 3%; left: 20.5%; width: 18%; z-index: 10;}
.item3 {position: absolute; top: 3%; left: 41%; width: 18%; z-index: 10;}
.item4 {position:absolute; top: 3%; left: 61.5%; width: 18%; z-index: 10; }
.item5 {position:absolute; top: 3%; left: 82%; width: 18%; z-index: 10; }
/*General CSS for enlarged hover images*/
.thumbnail:hover {background-color: transparent; }
.thumbnail:hover img{border: 0px solid black; }
.thumbnail span{position: absolute; left: -1000px; border: 0px solid #cc0000;
visibility: hidden; color: #cc0000; text-decoration: none; font-size: .9em; text-align: center; }
.thumbnail span img{ border-width: 0px; }
.thumbnail:hover span{ visibility: visible; z-index: 50; padding-right: 128%; padding-left: 128%; }
/*CSS for positioning each enlarged hover image */
/* width of enlarged hover image = 300% of width of thumbnail image so it scales as the browser changes; if set top position to 110%, the enlarged hover image always displays 10% below the thumbnails */
.item1:hover span{position: absolute; width: 300%; top: 110%; left: 0%; z-index: 50; padding-right: 128%; padding-left: 128%; padding-bottom : 20%; background-image: url(‘../images/general-images/hover-bk.jpg’); background-repeat: repeat; }
.item2:hover span{ position:absolute; width: 300%; top: 110%; left: -114%; z-index: 50; padding-right: 128%; padding-left: 128%; padding-bottom : 20%; background-image: url(‘../images/general-images/hover-bk.jpg’); background-repeat: repeat; }
.item3:hover span{position:absolute; width: 300%; top: 110%; left: -228%; z-index: 50; padding-right: 128%; padding-left: 128%; padding-bottom : 20%; background-image: url(‘../images/general-images/hover-bk.jpg’); background-repeat: repeat; }
.item4:hover span{position:absolute; width: 300%; top: 110%; left: -343%; z-index: 50; padding-right: 128%; padding-left: 128%; padding-bottom : 20%; background-image: url(‘../images/general-images/hover-bk.jpg’); background-repeat: repeat; }
.item5:hover span{ position:absolute; width: 300%; top: 110%; left: -457%; z-index: 50; padding-right: 128%; padding-left: 128%; padding-bottom : 20%; background-image: url(‘../images/general-images/hover-bk.jpg’); background-repeat: repeat; }
Please share our content if it is helpful

Tags: , ,