How to create responsive image gallery using HTML/CSS

How to create responsive image gallery using HTML/CSS

Today almost website have a media element on it. Responsive image gallery means all the media content fix for all size of device perfectly and easily to looking good design in your website. Are you looking for responsive image gallery like Pinterest, unsplash.com? Then, this tutorial is for you. So, Let’s start to learn how to create responsive image gallery using HTML/CSS. To create responsive image gallery, you need to import bootstrap JS and CSS file in your document. To import this file directly in you file Copy/Paste below lines in HEAD of your file or go to getbootstrap.com

Bootstrap CDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


Now, create one index.html file and import this above code into HEAD Tag. And then put below code in index.html file.

<!DOCTYPE html>
<html>
<head>
    <title>Responsive image gallery</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <h3>Responsive Image Gallery</h3>
        <!-- Grid row -->
        <div class="gallery" id="gallery"> 
            <!-- Grid column -->
            <div class="mb-3 popup-gallery pics animation all 1">
                <img class="img-fluid" alt="image" src="image.jpeg"></a>
            </div>
            <!-- Grid column -->
        </div>
    </div>
</body>
</html>


Now, to create responsive image gallery you just need to import below css into your CSS file or you can also add this CSS into < style> tag.

.gallery {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    -webkit-column-width: 33%;
    -moz-column-width: 33%;
    column-width: 33%; }
    .gallery .pics {
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease; }
    .gallery .animation {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }

    @media (max-width: 450px) {
    .gallery {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    -webkit-column-width: 100%;
    -moz-column-width: 100%;
    column-width: 100%;
    }
    }

    @media (max-width: 400px) {
    .btn.filter {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
    }
    }
    .margin{
      margin-bottom: 15px;
    }
        .image-link {
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}


Congratulations, your image gallery is ready to show all images into a perfect design. If you want to change columns you can do that easily by changing number in ”column-count” property. But make sure you need to change in all class for that.

That’s all. If you find this article is helpful don’t forget to share with your friends. Please help us by doing comment using comment box. Thank you!

Also Read:

Whatsapp Update: Login Up to Four devices using one Number

Post Comments(0)

Leave a reply