Expandable Images Gallery Using Html Css | Gallery Css Grid

Table of Contents

Expandable Images Gallery Using Html Css | Gallery Css Grid

Welcome to Code With Random blog. We learn how to create an Expandable Images Gallery. We use HTML & CSS  for Expandable Images Gallery. Hope you enjoy our blog so let’s start with a basic HTML structure for the Expandable Images Gallery.

Html Code 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>expandable images</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="gallery">
        <img src="https://picsum.photos/id/1028/300/300" alt="a forest after an apocalypse">
        <img src="https://picsum.photos/id/15/300/300" alt="a waterfall and many rocks">
        <img src="https://picsum.photos/id/1040/300/300" alt="a house on a mountain">
        <img src="https://picsum.photos/id/106/300/300" alt="sime pink flowers">
        <img src="https://picsum.photos/id/136/300/300" alt="big rocks with some trees">
        <img src="https://picsum.photos/id/1039/300/300" alt="a waterfall, a lot of tree and a great view from the sky">
        <img src="https://picsum.photos/id/110/300/300" alt="a cool landscape">
        <img src="https://picsum.photos/id/1047/300/300" alt="inside a town between two big buildings">
        <img src="https://picsum.photos/id/1057/300/300" alt="a great view of the sea above the mountain">
      </div>
</body>
</html>

There is all HTML code for the Expandable Images Gallery. Now, you can see output without CSS, then we write CSS for the Expandable Images Gallery.

Output

Expandable Images Gallery Html

CSS Code

.gallery {
  --s: 150px; /* control the size */
  --g: 10px; /* control the gap */
  --f: 1.5; /* control the scale factor */

  display: grid;
  gap: var(--g);
  width: calc(3 * var(--s) + 2 * var(--g));
  aspect-ratio: 1;
  grid-template-columns: repeat(3, auto);
}

.gallery > img {
  width: 0;
  height: 0;
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
  cursor: pointer;
  filter: grayscale(80%);
  transition: 0.35s linear;
}

.gallery img:hover {
  filter: grayscale(0);
  width: calc(var(--s) * var(--f));
  height: calc(var(--s) * var(--f));
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #60c4ff;
}

We have completed our CSS section,  Here is our final updated output CSS.

Final Output

Expandable Images Gallery CSS

Expandable Images Gallery CSS

We have completed our CSS section,  Here is our updated output with CSS. I hope you like the Expandable Images Gallery, you can see the output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you

This post teaches us to create an Expandable Images Gallery using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

code by – Temani Afif

Check out more…..

1.Html And Css Projects With Source Code

2. Add To Cart Button Html

3. Notes App Using Html Css Javascript

Share on:

Leave a Comment