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.
View Comments (0)