#site
  header
    h1 My Shiny Gallery
    p Some photographs that look lovely in a gallery...
    main#gallery
      a.gallery-element(href="#" style="background-image: url(https://abeeken.github.io/img/20180822_160248_1.jpg)")
        h2 The title of the photo
      a.gallery-element(href="#" style="background-image: url(https://abeeken.github.io/img/IMG_20191130_084544.jpg)")
        h2 The title of the photo
      a.gallery-element(href="#" style="background-image: url(https://abeeken.github.io/img/IMG_20180608_114312-01.jpeg)")
        h2 The title of the photo
      a.gallery-element(href="#" style="background-image: url(https://abeeken.github.io/img/IMG_20190101_154751.jpg)")
        h2 The title of the photo
      a.gallery-element(href="#" style="background-image: url(https://abeeken.github.io/img/IMG_20190217_120835.jpg)")
        h2 The title of the photo
      a.gallery-element(href="#" style="background-image: url(https://abeeken.github.io/img/IMG_20180615_132127.jpg)")
        h2 The title of the photo
  footer
    p Photos by Andrew Beeken | Background from 
      a(href="http://backgroundhost.com/") http://backgroundhost.com/
View Compiled
body{
    margin: 0;
    padding: 0;
    background: url(http://cdn.backgroundhost.com/backgrounds/subtlepatterns/cartographer.png);
    font-family: 'Playfair Display', serif;
}

h1, p, a{
    color: #ddd;
}

h1{
    font-family: 'Pacifico', cursive;
    font-size: 54px;
    font-weight: normal;
}

header{
    margin-bottom: 20px;
}

footer{
    margin-top: 20px;
}

#site{
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
}

#gallery{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    .gallery-element{
        grid-column: span 2;
        overflow: hidden;
        height: 250px;
        color: #333;
        text-decoration: none;
        display: grid;
        background-position: center;
        background-size: cover;
        transition: transform .5s;
        h2{
            margin: 0;
            padding: 30px;
            font-size: 1.6em;
            background: rgba($color: #fff, $alpha: .75);
            opacity: 0;
            transition: opacity .5s;
        }
        &:hover{
            transform: scale(1.05);
            h2{
                opacity: 1;
            }
        }
    }
}

@media screen and (max-width: 850px) and (min-width: 500px){
    #gallery{
        grid-template-columns: repeat(4, 1fr);
    }
}

@media screen and (max-width: 500px){
    #gallery{
        grid-template-columns: 1fr 1fr;
    }
}
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Pacifico|Playfair+Display&display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.