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 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.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.

Tutorial Categories: