Full-screen responsive gallery using CSS and Masonry



In this tutorial I will show you how to make a full-screen responsive gallery using CSS and Masonry.

Besides for an image gallery, this technique can also be used for things like articles, profile displays, posts, …

A demo and a big ol’ download button for the source code can be found below:


Live demo Download source


Now that I have your attention, let’s see what we’ll cover in this full-screen gallery tutorial:

  • How to use a placeholder service for dummy images to speed up development.
  • How to use Masonry to perfectly tile the images into columns.
  • How to create an overlay with a title and description on hovering your mouse over the images.
  • How to make it into a responsive gallery!

Basic set-up

In order to make this gallery, we will first require… images of course!

Luckily there are placeholder services that can easily let us use dummy images. There is (among others) placehold.itplacezombies.com, and its more cute sibling – which we will be using – placekitten.com

Our basic set-up will look like this:

<div id="container">
		<!-- This will make sure our size stays right when using Masonry -->
		<div class="grid-sizer"></div>

		<!-- This is what Masonry will tile for you -->
		<div class="item">

			<!-- An image, of course! -->
			<img src="http://placekitten.com/650/450" class="image">

			<!-- This is the overlay for the hover -->
			<a class="overlay" href="#">
				<h3 class="title">Some title</h3>
				<div class="description">
					<p>
						Lorem ipsum dolor sit amet, <br>
						consectetur adipisicing elit.
					</p>
				</div>
			</a>
		</div>
        ...
</div>



Tiling with masonry

Next, we tile the items by using Masonry. With jQuery we can initialize Masonry using the following:

$(window).load( function() {

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

});

Important note: We don’t use $(document).ready() here. Instead we use $(window).load(). If we don’t do this, the tiling will fail because Masonry will attempt to tile the images before they have loaded.

The CSS

First we need to enable your scrollbar. If we do not do this you will get incorrect spacing between items with Masonry.

html {
    overflow-y: scroll;
}

We need to set a percentage-based width for the columns and adjust the width according to the browser size using CSS media queries. We have initialized Masonry to accept grid-sizer as input for the width. This means we also need to set the width in the CSS for this class.

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

@media screen and (max-width: 1224px) {
  .grid-sizer { width: 33.33%; }
  .item { width: 33.33%; }
}

@media screen and (max-width: 720px) {
  .grid-sizer { width: 50%; }
  .item { width: 50%; }
}

@media screen and (max-width: 480px) {
  .grid-sizer { width: 100%; }
  .item { width: 100%; }
}

Next, we make an overlay that will pop up when you hover your mouse over the images. we can use rgba to make it semi-transparent. This is pretty basic so we will move straight on to the CSS of this part.

.overlay {
    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;
}

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

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

.overlay .description p {
    margin: 20px;
}

.item:hover .overlay {
    display: block;
}

We’re done

You now know how to make a full-screen responsive gallery using CSS and Masonry. Please feel free to share this article or like/follow us on your favorite social media!

Share the knowledge!
Share on Facebook0Tweet about this on Twitter0Share on Google+9Share on StumbleUpon280Share on Reddit0Share on LinkedIn2Share on TumblrBuffer this pageDigg this

Comments

You may also like...

Stay updated
Subscribe!