Responsive Image Gallery Using HTML and CSS (With Code)

Blogger Leb
October 18, 2020
0

How To Create Responsive Image Gallery Using HTML and CSS


Create a Responsive Image Gallery Using HTML and CSS only. In this article, you will learn how to create a professional and responsive image gallery.

Hello friends I am going to tell you how you can easily create a gallery on an image.
I am Santanu Jana a web developer. I will help you to create an image gallery using only HTML and CSS programming languages.

How To Create Responsive Image Gallery Using HTML and CSS 

 Here I have created a beautiful image gallery and used a little HTML and CSS programming language for it. This is very simple and easy so you can easily learn and know how to create an image gallery.

Mention points of this Responsive Image Gallery

  •  This image gallery is fully responsive and professional.
  • In the case of different devices, it also comes in different sizes, and in different cases, it looks completely beautiful and professional.
  •  I have used some special type of CSS code to do this. As a result, this image gallery looks completely professional not only on computers or laptops but also on every device such as tablets and mobiles.

  •  This gallery is built using common HTML and CSS programming languages. This HTML and CSS image gallery is completely professional and responsive. Can adjust itself in case of different devices.
  •  Basically, in this image gallery, I have given four horizontal images for the desktop. If you open a computer or laptop, you will see four images along the horizontal.

  • If you open this image gallery on a tablet, you will see two images.
  • If you open this image gallery on a smartphone or mobile, you will see one image along the horizontal. Depending on the different devices and skin sizes, it can adorn itself.
  • In addition, there is an option to give titles to the images in this image slider. This means that you can provide some specific information about the images in this image gallery.

Watch the video on how to make a SideBar menu using HTML CSS

 

Image Gallery is built using completely common HTML and CSS programming languages.
 I am absolutely sure that this image gallery will help you increase your demand and programming knowledge. For your convenience, I have given below the programming code such as HTML and CSS code required for creating this image gallery. You can also download all those codes by clicking the download button. You can also watch the live demo of this image gallery by clicking on the demo button.

Responsive Image Gallery Using HTML and CSS[Source Code⇩]

Hopefully from the video above you can fully understand how to make and work this Responsive Image Gallery. If you want to try this code yourself, you can. That is why I have given the source code below. First of all, you create an HTML file (rename.html) and a CSS file (rename.css). Then you put the HTML code in the HTML file and the CSS code in the CSS file. Be sure to link the HTML and cis code to each other (<link rel="stylesheet" href="sidebar.css">).


I would especially request you to download those codes by clicking on the download button without copying the code. Because I had some problems with Google when I uploaded these codes. So I have added some comments to this code. If you want to copy these codes and use them in your project, you can delete those comments. If you do not omit, there will be no problem.




HTML TAGS (<body> Add Code </body>)

This code is an HTML code (rename.html). Put this code in the head tags of your project and also in the head tags in the HTML file.


  <div class="wrapper">
        <h1>Responsive Image Gallery</h1>
        <p>Without Media Queries</p>
        <div class="grid">
            <div class="grid-item">
                <figure>
                    <img src="https://unsplash.it/250/187?image=400" alt="">
                    <figcaption>Image Title</figcaption>
                </figure>
            </div><!--<div id="sidebar">
                <div class="social facebook">
                  <a href=" https://www.facebook.com " target="_blank">
                    <p>Like on Facebook <i class="fa fa-facebook "></i> </p>
                  </a>-->
            <div class="grid-item">
                <figure>
                    <img src="https://unsplash.it/250/187?image=401" alt="">
                    <figcaption>Image Title</figcaption>
                </figure>
            </div>
            <div class="grid-item">
                <figure>
                    <img src="https://unsplash.it/250/187?image=403" alt="">
                    <figcaption>Image Title</figcaption>
                </figure>
            </div><!--<div id="sidebar">
                <div class="social facebook">
                  <a href=" https://www.facebook.com " target="_blank">
                    <p>Like on Facebook <i class="fa fa-facebook "></i> </p>
                  </a>-->
            <div class="grid-item">
                <figure>
                    <img src="https://unsplash.it/250/187?image=404" alt="">
                    <figcaption>Image Title</figcaption>
                </figure>
            </div>
            <div class="grid-item">
                <figure><!--<div id="sidebar">
                    <div class="social facebook">
                      <a href=" https://www.facebook.com " target="_blank">
                        <p>Like on Facebook <i class="fa fa-facebook "></i> </p>
                      </a>-->
                    <img src="https://unsplash.it/250/187?image=405" alt="">
                    <figcaption>Image Title</figcaption>
                </figure>
            </div>
            <div class="grid-item">
                <figure>
                    <img src="https://unsplash.it/250/187?image=406" alt="">
                    <figcaption>Image Title</figcaption>
                </figure>
            </div>
            <div class="grid-item">
                <figure><!--<div id="sidebar">
                    <div class="social facebook">
                      <a href=" https://www.facebook.com " target="_blank">
                        <p>Like on Facebook <i class="fa fa-facebook "></i> </p>
                      </a>-->
                    <img src="https://unsplash.it/250/187?image=407" alt="">
                    <figcaption>Image Title</figcaption>
                </figure>
            </div>
            <div class="grid-item">
                <figure>
                    <img src="https://unsplash.it/250/187?image=408" alt="">
                    <figcaption>Image Title</figcaption>
                </figure>
            </div>
            <div class="grid-item">
                <figure>
                    <img src="https://unsplash.it/250/187?image=409" alt="">
                    <figcaption>Image Title</figcaption>
                </figure>
            </div><!--<div id="sidebar">
                <div class="social facebook">
                  <a href=" https://www.facebook.com " target="_blank">
                    <p>Like on Facebook <i class="fa fa-facebook "></i> </p>
                  </a>-->
            <div class="grid-item">
                <figure>
                    <img src="https://unsplash.it/250/187?image=411" alt="">
                    <figcaption>Image Title</figcaption>
                </figure>
            </div>
        </div>
    </div>




CSS CODE (<head><style> Add code</style></head>)

This code is a CSS code (rename.css). You enter this code in the style tags in the head tags of your project. Also, you put in the style tags in the CSS file.

*, *:before, *:after {
  box-sizing: border-box;
}

.grid {
  max-width: 1000px;
  margin: 0 auto;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  -webkit-box-pack: center;
          justify-content: center;
}/*.heading {
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 4rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    padding: 3.5rem 0;*/
.grid-item {
  min-width: 250px;
  max-width: 250px;
  -webkit-box-flex: 1;
          flex: 1 1 250px;
  padding-left: .5rem;
  padding-right: .5rem;
  margin-bottom: 1rem;
}

.wrapper {
  min-height: 100vh;
  padding: 2rem 0;
  background: #40424a;
  color: #e4e4e8;
  font-family: 'Roboto', sans-serif;
  text-align: center;
}/*.heading {
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 4rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    padding: 3.5rem 0;*/
.wrapper h1 {
  font-size: 2.125em;
  line-height: 1.5;
}
.wrapper p {
  font-size: 1em;
  line-height: 1.5;
  margin-bottom: 1rem;
  color: #c4c4c8;
}
/*.heading {
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 4rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    padding: 3.5rem 0;*/
.grid-item figure {
  padding: 0;
  margin: 0;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
}
.grid-item figure img {
  display: block;
  max-width: 100%;
}
.grid-item figcaption {
  display: block;
  padding: .625rem .5rem;
  background: #474952;
}/*.heading {
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 4rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    padding: 3.5rem 0;*/




We hope you enjoy this Animated Responsive Image Gallery. If you have any problems, please let me know in the comments. I will try to solve all your problems related to this image gallery.


❤Sharing is caring❤



Tags
Share to other apps

You may like these posts

Show more

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
Post a Comment (0)
To Top