.full { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; } .full .content { background-color: rgba(0,0,0,0.75) !important; height: 100%; width: 100%; display: grid; } .full .content img { left: 50%; transform: translate3d(0, 0, 0); animation: zoomin 1s ease; max-width: 100%; max-height: 100%; margin: auto; } .byebye { opacity: 0; } .byebye:hover { transform: scale(0.2) !important; } .gallery { display: grid; grid-column-gap: 3px; grid-row-gap: 3px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-auto-rows: 3px; } .gallery img { max-width: 100%; border-radius:4px; box-shadow: 0 0 8px #333; } .gallery img:hover { border: 2px solid #90BF52; } .gallery .content { padding: 4px; } .gallery .gallery-item { transition: grid-row-start 300ms linear; transition: transform 300ms ease; transition: all 0.5s ease; cursor: pointer; } .gallery .gallery-item:hover { transform: scale(1.025); } @media (max-width: 600px) { .gallery { grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); } } @media (max-width: 400px) { .gallery { grid-template-columns: repeat(auto-fill, minmax(50%, 1fr)); } } @-moz-keyframes zoomin { 0% { max-width: 15%; } 100% { max-width: 100%; } } @-webkit-keyframes zoomin { 0% { max-width: 15%; } 100% { max-width: 100%; } } @-o-keyframes zoomin { 0% { max-width: 15%; } 100% { max-width: 100%; } } @keyframes zoomin { 0% { max-width: 15%; } 100% { max-width: 100%; } }