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

How to create a full-screen responsive image gallery using CSS and Masonry ( is a JavaScript grid layout library ), Masonry gallery is a popular grid layout that uses optimal space to place images without the need to crop your pictures. We are giving you this tutorial with a nice demo and source to download for free.

Step 1:

Create a grid and add images with different sizes.

<div id="container">
    <div class="grid-sizer"></div>
    <div class="item">
        <img src="http://placekitten.com/650/450" class="image">
        <a class="onhandover" href="#">
            <h3 class="title">Your Image Title</h3>
            <div class="description">
                <p>
                    Description Goes here!!
                </p>
            </div>
        </a>
    </div>
    <div class="item">
        <img src="http://placekitten.com/650/750" class="image">
        <a class="onhandover" href="#">
            <h3 class="title">Your Image Title</h3>
            <div class="description">
                <p>
                    Description Goes here!!
                </p>
            </div>
        </a>
    </div>
    <div class="item">
        <img src="http://placekitten.com/1650/1250" class="image">
        <a class="onhandover" href="#">
            <h3 class="title">Your Image Title</h3>
            <div class="description">
                <p>
                    Description Goes here!!
                </p>
            </div>
        </a>
    </div>
    <div class="item">
        <img src="http://placekitten.com/850/450" class="image">
        <a class="onhandover" href="#">
            <h3 class="title">Your Image Title</h3>
            <div class="description">
                <p>
                    Description Goes here!!
                </p>
            </div>
        </a>
    </div>
    <div class="item">
        <img src="http://placekitten.com/900/700" class="image">
        <a class="onhandover" href="#">
            <h3 class="title">Your Image Title</h3>
            <div class="description">
                <p>
                    Description Goes here!!
                </p>
            </div>
        </a>
    </div>
    <div class="item">
        <img src="http://placekitten.com/700/1400" class="image">
        <a class="onhandover" href="#">
            <h3 class="title">Your Image Title</h3>
            <div class="description">
                <p>
                    Description Goes here!!
                </p>
            </div>
        </a>
    </div>
    <div class="item">
        <img src="http://placekitten.com/1200/1300" class="image">
        <a class="onhandover" href="#">
            <h3 class="title">Your Image Title</h3>
            <div class="description">
                <p>
                    Description Goes here!!
                </p>
            </div>
        </a>
    </div>
    <div class="item">
        <img src="http://placekitten.com/750/650" class="image">
        <a class="onhandover" href="#">
            <h3 class="title">Your Image Title</h3>
            <div class="description">
                <p>
                    Description Goes here!!
                </p>
            </div>
        </a>
    </div>
    <div class="item">
        <img src="http://placekitten.com/1600/900" class="image">
        <a class="onhandover" href="#">
            <h3 class="title">Your Image Title</h3>
            <div class="description">
                <p>
                    Description Goes here!!
                </p>
            </div>
        </a>
    </div>
    <div class="item">
        <img src="http://placekitten.com/700/400" class="image">
        <a class="onhandover" href="#">
            <h3 class="title">Your Image Title</h3>
            <div class="description">
                <p>
                    Description Goes here!!
                </p>
            </div>
        </a>
    </div>
    <div class="item">
        <img src="http://placekitten.com/1100/1200" class="image">
        <a class="onhandover" href="#">
            <h3 class="title">Your Image Title</h3>
            <div class="description">
                <p>
                    Description Goes here!!
                </p>
            </div>
        </a>
    </div>
    <div class="item">
        <img src="http://placekitten.com/800/1100" class="image">
        <a class="onhandover" href="#">
            <h3 class="title">Your Image Title</h3>
            <div class="description">
                <p>
                    Description Goes here!!
                </p>
            </div>
        </a>
    </div>
    <div class="item">
        <img src="http://placekitten.com/600/400" class="image">
        <a class="onhandover" href="#">
            <h3 class="title">Your Image Title</h3>
            <div class="description">
                <p>
                    Description Goes here!!
                </p>
            </div>
        </a>
    </div>
    <div class="item">
        <img src="http://placekitten.com/1100/900" class="image">
        <a class="onhandover" href="#">
            <h3 class="title">Your Image Title</h3>
            <div class="description">
                <p>
                    Description Goes here!!
                </p>
            </div>
        </a>
    </div>
    <div class="item">
        <img src="http://placekitten.com/1320/1200" class="image">
        <a class="onhandover" href="#">
            <h3 class="title">Your Image Title</h3>
            <div class="description">
                <p>
                    Description Goes here!!
                </p>
            </div>
        </a>
    </div>
    <div class="item">
        <img src="http://placekitten.com/1024/768" class="image">
        <a class="onhandover" href="#">
            <h3 class="title">Your Image Title</h3>
            <div class="description">
                <p>
                    Description Goes here!!
                </p>
            </div>
        </a>
    </div>
</div>

The above markup creates an image 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:

<style>
.item {
    float: left;
    position: relative;
    line-height: 1em;
}

.grid-sizer { width: 20%; }
.item { width: 20%; }

@media screen and (max-width: 1224px) {
  /* 10 columns for larger screens */
  .grid-sizer { width: 33.33%; }
  .item { width: 33.33%; }
}

@media screen and (max-width: 720px) {
  /* 10 columns for larger screens */
  .grid-sizer { width: 50%; }
  .item { width: 50%; }
}

@media screen and (max-width: 480px) {
  /* 10 columns for larger screens */
  .grid-sizer { width: 100%; }
  .item { width: 100%; }
}

.image{
    max-width: 100%;
    margin: 0;
    display: block;
}

.image:after {
    clear:both;
}

.onhandover {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    text-decoration: none;
    color: #fff;
    display: none;
}

.onhandover .title {
    text-align: center;
    font-size: 30px;
}

.onhandover .description {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.80);
    width: 100%;
    margin: 0;
}

.onhandover .description p {
    text-align: center;
}

.item:hover .onhandover {
    display: block;
}
.item h3 {
    margin: 20px;
}
.item p {
    margin: 10px;
}
</style>

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

jQuery files to Include:

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="masonry.pkgd.min.js"></script>

Initialize Masonry using the following:

<script type="text/javascript">
$(window).load( function() {

    $("#container").masonry({
        "itemSelector": ".item",
        "columnWidth": ".grid-sizer",
    });

});
</script>

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