#zz_frame::before {
            content:  '';
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            position: fixed;
            background: rgba(0,0,0,0.85);
            z-index: -1;
        }
        #zz_frame {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 9999;
        }
        #zz_media {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateY(-50%) translateX(-50%);
            margin: 0 auto;
            display: inline-block;
        }
        #zz_media img {
            width: 100%;
            box-shadow: 0px 0px 20px 1px rgb(0,0,0);
        }
        #zz_frame .zz_close {
            color: #fff;
            position: absolute;
            right: 30px;
            top: 10px;
            font-size: 46px;
            background: transparent;
            border: 0;
            border-radius: 50%;
            cursor: pointer;
        }
        #zz_frame .zz_controls {
            color: #fff;
            position: absolute;
            left: 10px;
            top: 10px;
        }
        #zz_frame .zz_controls button {
            background: #000;
            border: 0;
            color: #fff;
            padding: 8px;
            margin-right: 5px;
        }


#zz_frame {
  animation-name: example;
  animation-duration: 0.8s;
}
@keyframes example {
  from {opacity: 0; height: 0;}
  to {opacity: 1; height: 100%;}
}