Demo 1:

Resize the window to see how the gallery grid changes the number of its rows and columns.

 

Responsive Image Grids with Transitional Effects when Hovered

Responsive image grids, or image gallery with fluid rows & columns, can be seen all over the web nowadays.

Let's built it with pure CSS/CSS3. No fancy dancy JavaScript or jQuery needed.

HTML

<ul id="rig"> <li> <a class="rig-cell" href="#"> <img class="rig-img" src="/rg/img/1.jpg" /> <span class="rig-overlay"></span> <span class="rig-text">Lorem Ipsum Dolor</span> </a> </li> ...more... </ul>

View full HTML source code

CSS

View full CSS source code

Demo 2: Use image sprites for responsive image grids