CSS: Image Popup and Lightbox

image-popup-lightbox.css

/* Image Popup and Lightbox */
      .trans {
          transition: all 1s ease;
          -moz-transition: all 1s ease;
          -ms-transition: all 1s ease;
          -o-transition: all 1s ease;
          -webkit-transition: all 1s ease;
      }
    
      .imgpop { /* Enlarge image by clicking */
          display: flex;
      }
    
      .imgpop ul {
          list-style: none;
          width: 100%;
          height: 100%;
          z-index: 1;
          box-sizing: border-box;
      }
    
      .imgpop ul li {
        position: relative;
          overflow: hidden;
      }
    
        .imgpop ul li img {
          width: 100%;
          height: auto;
          overflow: hidden;
      }
      .imgpop ul li::before {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(5,5,5,.4);
          content: '';
          color: white;
          opacity: 0.4;
          text-align: center;
          box-sizing: border-box;
          pointer-events: none;
          transition: all 0.5s ease;
          -moz-transition: all 0.5s ease;
          -ms-transition: all 0.5s ease;
          -o-transition: all 0.5s ease;
          -webkit-transition: all 0.5s ease;
      }
    
      .imgpop ul li:hover::before {
          opacity: 0;
          background-color: rgba(0,0,0,0.90);
      }
    
      .lightbox {
          position: fixed;
          width: 100%;
          height: 100%;
          text-align: center;
          top: 0;
          left: 0;
          background-color: rgba(0,0,0,0.75);
          z-index: 9999;
          opacity: 0;
          pointer-events: none;
      }
    
      .lightbox img {
          max-width: 90%;
          max-height: 80%;
          position: relative;
          top: -100%;
          /* Transition */
          transition: all 1s ease;
          -moz-transition: all 1s ease;
          -ms-transition: all 1s ease;
          -o-transition: all 1s ease;
          -webkit-transition: all 1s ease;
          z-index: 9999;
      }
    
      .lightbox:target {
          outline: none;
          top: 0;
          opacity: 1;
          pointer-events: auto;
          transition: all 1.2s ease;
          -moz-transition: all 1.2s ease;
          -ms-transition: all 1.2s ease;
          -o-transition: all 1.2s ease;
          -webkit-transition: all 1.2s ease;
          z-index: 9999;
      }
      .lightbox:target img {
          top: 0;
          top: 50%;
          transform: translateY(-50%);
          -moz-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
          -o-transform: translateY(-50%);
          -webkit-transform: translateY(-50%);
           z-index: 9999;
      }