March 10, 2014 9:25 am

How to create Full Screen Responsive Image Gallery using CSS and Masonry

In this tutorial I am going to show you how to create a full screen responsive image gallery using CSS and Masonry ( is a JavaScript grid layout library ), I am giving you image gallery example but you can create your blog posts, user profiles, video wall etc using this technique so we are giving you this tutorial with a nice demo and source to download for free.

How to create Full Screen Responsive Image Gallery using CSS and Masonry


Read more:

How to create Responsive Header Menu with CSS

How to create Mobile Navigation Menu with CSS & jQuery

Step 1:

Create a grid and add images with different sizes.

Above markup create images grid with title and description with images placeholder for fast images delivery http://placekitten.com/1024/768 placekitten.com is A quick and simple service for getting pictures of kittens for use as placeholders in your designs or code.

CSS to organize your gallery:

We used @media for different screens to make gallery responsive and .onhandover class to show title and description oh handover event.

jQuery files to Include:

Initialize Masonry using the following:

That’s all for today’s tutorial I hope you like this tutorial please don’t forget to give us your feedback and share with your friends.


Tutorial Categories: