CSS photo gallery

css-photo-gallery.markdown

CSS photo gallery

A Pen by scholz on CodePen.

License.

index.html

<h1>Full CSS gallery with popin</h1>
<div id="gallery">
<ul>
  <li id="image1"> 
    <div class="mosaicItem"><a href="#popin1">
        <img src="https://www.wonderful.car/wp-content/uploads/2021/10/wonderful_car-lamborghini-countach-lp400s-youtube-480x320.jpg" alt="" />
        <div class="text">description lorim</div>
      </a></div>
    <div class="popin" id="popin1"><a href="#image1">
        <div class="overlay"></div>
        <div class="imgBox"><img src="https://www.wonderful.car/wp-content/uploads/2021/10/wonderful_car-lamborghini-countach-lp400s-youtube-480x320.jpg" alt="" /></div>
      </a></div>
  </li>
  <li id="image2">
    <div class="mosaicItem"><a href="#popin2">
        <img src="https://www.wonderful.car/wp-content/uploads/2021/10/wonderful_car-lamborghini-countach-lp400s-youtube-480x320.jpg" alt="" />
        <div class="text">description lorim</div>
      </a></div>
    <div class="popin" id="popin2"><a href="#image2">
        <div class="overlay"></div>
        <div class="imgBox"><img src="https://www.wonderful.car/wp-content/uploads/2021/10/wonderful_car-lamborghini-countach-lp400s-youtube-480x320.jpg" alt="" /></div>
      </a></div>
  </li>
  <li id="image3">
    <div class="mosaicItem"><a href="#popin3">
        <img src="https://www.wonderful.car/wp-content/uploads/2021/10/wonderful_car-lamborghini-countach-lp400s-youtube-480x320.jpg" alt="" />
        <div class="text">description lorim</div>
      </a></div>
    <div class="popin" id="popin3"><a href="#image3">
        <div class="overlay"></div>
        <div class="imgBox"><img src="http://lorempixel.com/400/400/?3" alt="" /></div>
      </a></div>
  </li>
  <li id="image4">
    <div class="mosaicItem"><a href="#popin4">
        <img src="https://www.wonderful.car/wp-content/uploads/2021/10/wonderful_car-lamborghini-countach-lp400s-youtube-480x320.jpg" alt="" />
        <div class="text">description lorim</div>
      </a></div>
    <div class="popin" id="popin4"><a href="#image4">
        <div class="overlay"></div>
        <div class="imgBox"><img src="https://www.wonderful.car/wp-content/uploads/2021/10/wonderful_car-lamborghini-countach-lp400s-youtube-480x320.jpg" alt="" /></div>
      </a></div>
  </li>
  <li id="image5">
    <div class="mosaicItem"><a href="#popin5">
        <img src="http://lorempixel.com/400/400/?5" alt="" />
        <div class="text">description lorim</div>
      </a></div>
    <div class="popin" id="popin5"><a href="#image5">
        <div class="overlay"></div>
        <div class="imgBox"><img src="http://lorempixel.com/400/400/?5" alt="" /></div>
      </a></div>
  </li>
  <li id="image6">
    <div class="mosaicItem"><a href="#popin6">
        <img src="http://lorempixel.com/400/400/?6" alt="" />
        <div class="text">description lorim</div>
      </a></div>
    <div class="popin" id="popin6"><a href="#image6">
        <div class="overlay"></div>
        <div class="imgBox"><img src="http://lorempixel.com/400/400/?6" alt="" /></div>
      </a></div>
  </li>
  <li id="image7">
    <div class="mosaicItem"><a href="#popin7">
        <img src="http://lorempixel.com/400/400/?7" alt="" />
        <div class="text">description lorim</div>
      </a></div>
    <div class="popin" id="popin7"><a href="#image7">
        <div class="overlay"></div>
        <div class="imgBox"><img src="http://lorempixel.com/400/400/?7" alt="" /></div>
      </a></div>
  </li>
  <li id="image8">
    <div class="mosaicItem"><a href="#popin8">
        <img src="https://www.wonderful.car/wp-content/uploads/2021/10/wonderful_car-lamborghini-countach-lp400s-youtube-480x320.jpg" alt="" />
        <div class="text">description lorim</div>
      </a></div>
    <div class="popin" id="popin8"><a href="#image8">
        <div class="overlay"></div>
        <div class="imgBox"><img src="http://lorempixel.com/400/400/?8" alt="" /></div>
      </a></div>
  </li>
  <li id="image9">
    <div class="mosaicItem"><a href="#popin9">
        <img src="http://lorempixel.com/400/400/?9" alt="" />
        <div class="text">description lorim</div>
      </a></div>
    <div class="popin" id="popin9"><a href="#image9">
        <div class="overlay"></div>
        <div class="imgBox"><img src="http://lorempixel.com/400/400/?9" alt="" /></div>
      </a></div>
  </li>
  <li id="image10">
    <div class="mosaicItem"><a href="#popin10">
        <img src="http://lorempixel.com/400/400/?10" alt="" />
        <div class="text">description lorim</div>
      </a></div>
    <div class="popin" id="popin10"><a href="#image10">
        <div class="overlay"></div>
        <div class="imgBox"><img src="http://lorempixel.com/400/400/?10" alt="" /></div>
      </a></div>
  </li>
  <li id="image11">
    <div class="mosaicItem"><a href="#popin11">
        <img src="http://lorempixel.com/400/400/?11" alt="" />
        <div class="text">description lorim</div>
      </a></div>
    <div class="popin" id="popin11"><a href="#image11">
        <div class="overlay"></div>
        <div class="imgBox"><img src="http://lorempixel.com/400/400/?11" alt="" /></div>
      </a></div>
  </li>
  <li id="image12">
    <div class="mosaicItem"><a href="#popin12">
        <img src="http://lorempixel.com/400/400/?12" alt="" />
        <div class="text">description lorim</div>
      </a></div>
    <div class="popin" id="popin12"><a href="#image12">
        <div class="overlay"></div>
        <div class="imgBox"><img src="http://lorempixel.com/400/400/?12" alt="" /></div>
      </a></div>
  </li>
  <li id="image13">
    <div class="mosaicItem"><a href="#popin13">
        <img src="http://lorempixel.com/400/400/?13" alt="" />
        <div class="text">description lorim</div>
      </a></div>
    <div class="popin" id="popin13"><a href="#image13">
        <div class="overlay"></div>
        <div class="imgBox"><img src="http://lorempixel.com/400/400/?13" alt="" /></div>
      </a></div>
  </li>
  <li id="image14">
    <div class="mosaicItem"><a href="#popin14">
        <img src="http://lorempixel.com/400/400/?14" alt="" />
        <div class="text">description lorim</div>
      </a></div>
    <div class="popin" id="popin14"><a href="#image14">
        <div class="overlay"></div>
        <div class="imgBox"><img src="http://lorempixel.com/400/400/?14" alt="" /></div>
      </a></div>
  </li>
  <li id="image15">
    <div class="mosaicItem"><a href="#popin15">
        <img src="http://lorempixel.com/400/400/?15" alt="" />
        <div class="text">description lorim</div>
      </a></div>
    <div class="popin" id="popin15"><a href="#image15">
        <div class="overlay"></div>
        <div class="imgBox"><img src="http://lorempixel.com/400/400/?15" alt="" /></div>
      </a></div>
  </li>
</ul>
  

</div>

style.less

* {
  box-sizing: border-box;
}

body,
html {
  padding: 0;
  margin: 0;
  background: #f4f4f4;
}

h1 {
  font-family: "Open Sans", sans-serif;
  margin-left: 35px;
}

#gallery {
  ul {
    list-style-type: none;
    li {
      display: inline-block;
      position: relative;
      overflow: hidden;
      .mosaicItem {
        width: 480px;
        height: 270px;
        img {
          width: 100%;
          height: auto;
        }
        
        a {
          .text {
            position: absolute;
            //bottom: -50px;
            left: 0;
            width: 100%;
            height: 50px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            font-family: "Open Sans", sans-serif;
            text-align: center;
            font-weight: 600;
            line-height: 50px;
            opacity: 1;
            bottom: 0;
            z-index: 1;
          }
        }
      }

      .popin {
        display: flex;
        text-align: center;
        position: fixed;
        top: -100%;
        transition: all ease 0.5s;
        opacity: 0;
        width: 100%; // was 100%
        height: 100%; // was 100%
        left: 0;
        justify-content: center;
        align-items: center;
        z-index: 998;
        &:target {
          top: 0;
          opacity: 100;

          .imgBox {
            position: relative;
            z-index: 999;

            &:before {
              content: "✖";
              position: absolute;
              right: 10px;
              top: 10px;
              color: white;
              z-index: 999;
            }

            img {
              border: 3px solid white;
            }
          }
        }

        .overlay {
          position: absolute;
          top: 0;
          left: 0;
          background: rgba(0, 0, 0, 0.7);
          width: 100%;
          height: 100%;
          z-index: 999;
        }
      }
    }
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet" />