Day 327

How to build an image gallery...
#CodingPhase #TheCodingWay #365CodingPhaseChallenge

**********

  <style>
    * {
      box-sizing: border-box;
    }
    body {
      padding: 50px;
      font-family: sans-serif;
      background: linear-gradient(to right, #F93D66, #6D47D9);
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin: 0 0 5px 0;
    }
    .close {
      background: none;
      color: black;
      border: 0;
    }
    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, 100px);
      grid-auto-rows: 100px;
      grid-auto-flow: dense;
    }
    .item {
      overflow: hidden;
      display: grid;
      grid-template-columns: 1;
      grid-template-rows: 1;
    }
    .item img {
      grid-column: 1 / -1;
      grid-row: 1 / -1;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .item__overlay {
      background: #ffc60032;
      grid-column: 1 / -1;
      grid-row: 1 / -1;
      position: relative;
      display: grid;
      justify-items: center;
      align-items: center;
      transition: 0.2s;
      transform: translateY(100%);
    }
    .item__overlay button {
      background: none;
      border: 2px solid white;
      color: white;
      text-transform: uppercase;
      background: rgba(0, 0, 0, 0.7);
      padding: 5px;
    }
    .item:hover .item__overlay {
      transform: translateY(0);
    }
    .item.v3 {
      grid-row: span 3;
    }
    .item.v4 {
      grid-row: span 4;
    }
    .item.h2 {
      grid-column: span 2;
    }
    .item.h3 {
      grid-column: span 3;
    }
    .overlay {
      position: fixed;
      background: rgba(0, 0, 0, 0.7);
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: none;
      z-index: 2;
    }
    .overlay.open {
      display: grid;
      align-items: center;
      justify-items: center;
    }
    .overlay-inner {
      background: white;
      width: 700px;
      padding: 20px;
    }
    .overlay img {
      width: 100%;
    }
  </style>