Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- * {
- background-color: #ddd;
- box-sizing: border-box;
- }
- #gallery {
- display: grid;
- grid-template: repeat(6, 1fr)/repeat(6, 1fr);
- grid-gap: 0.5em;
- }
- @media (max-width: 800px) {
- #gallery {
- display: flex;
- align-items: flex-start;
- flex-wrap: wrap;
- }
- #gallery > div {
- width: 48%;
- margin: 1%;
- }
- }
- @media (max-width: 800px) and (max-width: 350px) {
- #gallery > div {
- width: 98%;
- }
- }
- #gallery > div:nth-child(6n + 1) {
- grid-column: span 2;
- grid-row: span 2;
- }
- #gallery > div:nth-child(2) {
- grid-column: span 3;
- grid-row: span 3;
- }
- #gallery > div:nth-child(4) {
- grid-column: span 1;
- grid-row: span 2;
- }
- #gallery > div > a {
- opacity: 0;
- position: absolute;
- color: #000;
- background-color: #000;
- font: bold 2em "Helvetica";
- text-shadow: 0 -1px 5px #fff, -1px 0px 5px #fff, 0 1px 5px #fff, 1px 0px 5px #fff;
- padding: 2rem;
- mix-blend-mode: difference;
- width: 100%;
- height: 100%;
- transition: all ease 1s;
- cursor: default;
- }
- #gallery > div > img {
- width: 100%;
- min-height: 100%;
- transition: grid-row-start 300ms linear;
- transition: transform 300ms ease;
- transition: all 0.5s ease;
- }
- #gallery > div:hover img {
- transform: scale(1.0125);
- }
- #gallery > div {
- overflow: hidden;
- position: relative;
- box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 20px 0 rgba(0, 0, 0, 0.19);
- }
- #gallery div,
- #gallery a {
- display: flex;
- justify-content: center;
- align-items: center;
- text-decoration: none;
- border: 2px solid #999;
- border-radius: 4px;
- }
- [id^="lightbox-"] {
- position: fixed;
- top: 0;
- left: 0;
- width: 100vw;
- height: 100vh;
- background-color: rgba(0, 0, 0, 0.5);
- display: flex;
- opacity: 0;
- transition: opacity 450ms ease-in-out;
- align-items: center;
- justify-content: center;
- pointer-events: none;
- }
- [id^="lightbox-"]:target {
- opacity: 1;
- pointer-events: inherit;
- }
- [id^="lightbox-"]:target img {
- filter: blur(0);
- }
- [id^="lightbox-"] .content {
- max-width: 90%;
- position: relative;
- color: #fff;
- }
- [id^="lightbox-"] .content:hover > a.close {
- opacity: 1;
- transform: scale(1, 1);
- }
- [id^="lightbox-"] .content:hover > .title {
- opacity: 1;
- transform: translateY(-3px);
- }
- [id^="lightbox-"] .content:hover > .title::after {
- opacity: 1;
- }
- [id^="lightbox-"] .content > * {
- transition: all 450ms ease-in-out;
- }
- [id^="lightbox-"] img {
- max-height: 90vh;
- max-width: 100%;
- margin: 0;
- padding: 0;
- filter: blur(50px);
- cursor: default;
- border: 2px solid #ddd;
- border-radius: 4px;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement