Demo 2:


Use Image Sprites in Responsive Image Grids

This tutorial will show you how to use image sprites in the Responsive Image Grid.

An image sprite, or CSS sprite, is a single image that contains a collection of images. Using image sprite will reduce the server overhead of having to fetch multiple images.


Basically the markup is the same as described in the demo 1 except the image element. Instead of using the IMG tag for each gallery image, now we should use other tags such as SPAN or DIV that will use the image sprite as their background image. For example:

<span class="rig-img" style="background-position:center 6.66%;"></span>

View full HTML source code


View full CSS source code