• Home
  • PHP
  • MySQL
  • Demos
  • HTML
  • CSS
  • jQuery
  • Framework
  • Social
  • Request Tutorial
PHP Lift
  • Home
  • Demos
  • Advertisement
PHP Lift
  • Home
  • PHP
  • MySQL
  • Demos
  • HTML
  • CSS
  • jQuery
  • Framework
  • Social
  • Request Tutorial
  • Follow
    • Facebook
    • Twitter
    • Google+
    • Pinterest
    • Youtube
    • Instagram
    • RSS
How to create Full Screen Responsive Image Gallery using CSS and Masonry
Home
CSS

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

October 8th, 2020 Huzoor Bux CSS, jQuery 1 comments

Facebook Twitter Google+ LinkedIn Pinterest

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.

 

DEMO
DOWNLOAD CODE

 

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.

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)

Related

  • Tags
  • css
  • Full Screen
  • How to
  • Masonry
  • Responsive Image Gallery
Facebook Twitter Google+ LinkedIn Pinterest
Next article Programming Languages for Better Job Opportunities
Previous article A Complete Guide to Full-Stack Development

Huzoor Bux

I am a PHP Developer

Related Posts

Make Country, State and City Dropdown with REST API & jQuery API
February 27th, 2022

Make Country, State and City Dropdown with REST API & jQuery

DataTables Server-side Processing with PHP and MySQL Guide
February 24th, 2022

DataTables Server-side Processing with PHP and MySQL

Skeleton Screen Loading Animation using HTML and CSS CSS
February 7th, 2022

Skeleton Screen Loading Animation using HTML and CSS

1 Comment

  1. How to Create Full Screen Responsive Image Gallery Using CSS and Masonry – A2M1N
    October 8, 2020 at 8:27 am Reply ↓

    […] Article URL: https://www.phplift.net/how-to-create-full-screen-responsive-image-gallery-using-css-and-masonry/ […]

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Advertisement
    Like us
    Recent Posts
    • How to Extract Text from PDF using PHP
    • 3 reasons why you SHOULD write tests
    • How to create a screen recorder in JavaScript
    • Best 10 Programming Languages that will rule in 2022
    • Top 7 Websites To Get Your First Paid Internship
    Categories
    • API
    • Bootstrap
    • Bot
    • CSS
    • CSS 3
    • Database
    • Designing
    • Framework
    • Guide
    • HTML
    • HTML 5
    • JavaScript
    • jQuery
    • MySQL
    • Node.js
    • oAuth
    • Payment
    • PHP
    • Python
    • Social
    • Tips
    • WordPress
    Weekly Tags
    • PHP
    • How to
    • javascript
    • api
    • MYSQL
    • jQuery
    • PHP Basics
    • Programming Habits
    • HTML5
    • PHP framework
    • About
    • Privacy Policy
    • Back to top
    © PHPLift 2021. All rights reserved.