How To Create an Animated Image Gallery Using HTML and CSS

Blogger Leb
October 18, 2020
0

How To Create an Animated Image Gallery Using HTML and CSS

create an animated Image Gallery using only common HTML and CSS programming languages. This image gallery is fully responsive and animated using only simple HTML and CSS programming languages.

 I am Shantanu a web developer. I'm going to teach you and let you know how to create an animated responsive image gallery. Here I have shown you step by step so that you can understand how it is made. The programming code used here is written very simply so that those who do not have programming knowledge can understand. Hopefully, this image gallery will help you a lot to increase your knowledge and knowledge about programming.

Create an Animated Image Gallery Using HTML and CSS 2020

 Some special information about image galleries

  • This Responsive Image Gallery is built using common HTML and CSS programming languages. This image gallery is fully adjustable for different devices to be fully professional and animated and responsive.
  • In the case of desktops or laptops, it can be seen in three images along the horizontal, and in the case of tabs or tablets, it can be seen in two images.
  •  In the case of mobile, it can be seen in an image along the horizontal, which means that in the case of different devices, it can adapt itself completely.

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


It has animations, so when you click on this image or move the mouse, the image will zoom up to 2x. Below are the necessary programming codes for your convenience. You can use your project or website by copying those codes. Or you can download the required source code by clicking on the download button below. To watch live, you can watch the live demo by clicking on the demo button below.

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

Hopefully from the video above you can fully understand how to make and work this Animated 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="container">

    <h1 class="heading">Image Gallery with CSS Grid <span>& Flexbox Fallback</span></h1>

    <div class="gallery">

        <div class="gallery-item">
            <img class="gallery-image" src="https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?w=500&h=500&fit=crop" alt="person writing in a notebook beside by an iPad, laptop, printed photos, spectacles, and a cup of coffee on a saucer">
        </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="gallery-item">
            <img class="gallery-image" src="https://images.unsplash.com/photo-1515260268569-9271009adfdb?w=500&h=500&fit=crop" alt="sunset behind San Francisco city skyline">
        </div>

        <div class="gallery-item">
            <img class="gallery-image" src="https://images.unsplash.com/photo-1506045412240-22980140a405?w=500&h=500&fit=crop" alt="people holding umbrellas on a busy street at night lit by street lights and illuminated signs in Tokyo, Japan">
        </div>

        <div class="gallery-item">
            <img class="gallery-image" src="https://images.unsplash.com/photo-1514041181368-bca62cceffcd?w=500&h=500&fit=crop" alt="car interior from central back seat position showing driver and blurred view through windscreen of a busy road at night">
        </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="gallery-item">
            <img class="gallery-image" src="https://images.unsplash.com/photo-1445810694374-0a94739e4a03?w=500&h=500&fit=crop" alt="back view of woman wearing a backpack and beanie waiting to cross the road on a busy street at night in New York City, USA">
        </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="gallery-item">
            <img class="gallery-image" src="https://images.unsplash.com/photo-1486334803289-1623f249dd1e?w=500&h=500&fit=crop" alt="man wearing a black jacket, white shirt, blue jeans, and brown boots, playing a white electric guitar while sitting on an amp">
        </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.

/*

All grid code is placed in a 'supports' rule (feature query) at the bottom of the CSS (Line 77). 
        
The 'supports' rule will only run if your browser supports the CSS grid.

Flexbox is used as a fallback so that browsers that don't support the grid will still receive an identical layout.

*/

@import url(https://fonts.googleapis.com/css?family=Montserrat:500);

: root {
    /* Base font size */
    font-size: 10px;
}

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

body {
    min-height: 100vh;
    background-color: #fafafa;
}

.container {
    max-width: 100rem;
    margin: 0 auto;
    padding: 0 2rem 2rem;
}

.heading {
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 4rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    padding: 3.5rem 0;
    color: #1a1a1a;
}

.heading span {
    display: block;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    /* Compensate for excess margin on outer gallery flex items */
    margin: -1rem -1rem;
}

.gallery-item {
    /* Minimum width of 24rem and grow to fit available space */
    flex: 1 0 24rem;
    /* Margin value should be half of grid-gap value as margins on flex items don't collapse */
    margin: 1rem;
    box-shadow: 0.3rem 0.4rem 0.4rem rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.gallery-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms ease-out;
}

.gallery-image:hover {
    transform: scale(1.15);
}

/*

The following rule will only run if your browser supports the CSS grid.

Remove or comment out the code block below to see how the browser will fall-back to flexbox styling. 

*/

@supports (display: grid) {
    .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
        grid-gap: 2rem;
    }

    .gallery,
    .gallery-item {
        margin: 0;
    }
}




We hope you enjoy this Animated Responsive Image Gallery. And you have learned and learned how to create a Responsive, Animated Image Gallery using only HTML and CSS programming languages. 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