<meta name="viewport" content="width=device-width, initial-scale=1">

<body class="light">
  <button id="change-light" class="btn">🌑</button>
  <div class="container">
    <div class="box sm box-shadow-dark">
      <p>BECOUSE</p>
    </div>
    <div class="box lg box-shadow-dark">
      <p>EVERY</p>
    </div>
    <div class="box lg box-shadow-dark">
      <p>ARTIST</p>
    </div>
    <div class="box sm box-shadow-dark">
      <p>FOLLOWS</p>
    </div>
    <div class="box xl box-shadow-dark">
      <p>THE</p>
    </div>
    <div class="box sm box-shadow-dark">
      <p>BEAUTY</p>
    </div>
    <div class="box lg box-shadow-dark">
      <p>EVERYWHERE</p>
    </div>
    <div class="box sm box-shadow-dark">
      <p>AROUND</p>
    </div>
    <div class="box sm box-shadow-dark">
      <p>THE</p>
    </div>
    <div class="box sm box-shadow-dark">
      <p>GLOBE</p>
    </div>
  </div>
  <button id="load-more" class="btn">>> load more <<</button>
</body>

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');

$light-color: #fff;
$dark-color: #1b1b1b;
$dark-color-opaque: rgba(12,12,12,0.65);
$font-playfair: 'Playfair Display', serif;
$text-size: 1.5em;

body {
    margin: 0;
    padding: 0;
    text-align: center;
    font-family: $font-playfair;
    font-size: $text-size;
    text-shadow: 0 4px 2px $dark-color;
    font-weight: 800;
}
.btn {
    margin-top: 10px;
    text-shadow: 0 0 16px orange, 0 0 32px yellow;
    font-size: 1.8em;
    background-color: transparent;
    border: 0;
    border-radius: 3px;
    padding: 0;
    cursor: pointer;
    &:focus {
        outline: 0;
    }
}

.light {
    color: $light-color;
    background-color: $light-color;
}

.dark {
    color: $light-color;
    background-color: $dark-color;
}

.box-shadow-dark {
  box-shadow: 0 0 2px 2px $dark-color;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-auto-rows: 120px;
  max-width: 760px;
  margin: 5% auto 0;
  
  .box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 6px;
    background-color: rgba(200,15,120,0.5);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: left;
    border-radius: 2px;
    transition: ease-in-out 1.7s;
    
    &:hover{
      background-blend-mode: initial;
      background-position: right;
      background-repeat: no-repeat;
      & > p {
        visibility: hidden;
      }
    }
    &:active {
      background-position: left;
    }
    
  }
  
  .sm {
    grid-row: span 1;
    grid-column: span 2;
  }
  
  .lg {
    grid-row: span 2;
    grid-column: span 2;
  }
  
  .xl {
    grid-row: span 3;
    grid-column: span 2;
  }
}

@media (max-width: 676px) {
  .container{
    .box {
      margin: 5px 0;
    }
  }
}

#load-more {
  text-shadow: initial;
  font-size: 0.8em;
  color: darkred;
  margin: 50px;
  border-bottom: 1px solid darkred;
}
View Compiled 
// Return a random color rgb
function getRandColor () {
  const RED = Math.floor(Math.random() * 255);
  const GREEN = Math.floor(Math.random() * 255);
  const BLUE = Math.floor(Math.random() * 255);
  const color = `rgba(${RED},${GREEN},${BLUE},0.55`;
  return color;
}

// For random image from https://picsum.photos
function getRandomImage() {
  const randNum = 200 + (Math.floor(Math.random()*200));
  return `url(https://picsum.photos/${randNum}/300)`;
}

// This needs more refactoring, plus fixing dimension random func.
// For box's dimension
function getRandomDim () {
  const randNum = Math.floor(Math.random()*3);
  let randDim;
  randNum === 0 ?
    randDim = 'sm' :
    randNum === 1 ?
    randDim = 'lg' :
    randDim = 'xl';
  
  return randDim;
}

// Init
const body = document.querySelector('body');
const images = document.querySelectorAll('.box');
const boxContainer = document.querySelector('.container');
const btnChangeLight = document.querySelector('#change-light');
const btnLoadMore = document.querySelector('#load-more');

// Assign boxes' random image
images.forEach(image => {
  const randNum = 400 + (Math.floor(Math.random()*200));
  image.style.backgroundImage = `url(https://picsum.photos/${randNum}/300)`;
});

setInterval(() => {
  images.forEach(image => {    
    const randomColor = getRandColor();
    image.style.backgroundColor = randomColor;
  })
}, 2500)

// We have events here
btnChangeLight.addEventListener('click', () => {
  body.classList.toggle('dark');
  btnChangeLight.textContent === '🌑' ?
  btnChangeLight.textContent = '☀️':
  btnChangeLight.textContent = '🌑';
})

body.addEventListener('click', () => {
  for (let c = 0; c <= 7; c++) {    
    const randomColor = getRandColor();
    let newBox = document.createElement('div');
    let randomDim = getRandomDim();
    let randomImage = getRandomImage();
    
    newBox.style.backgroundColor = randomColor;
    newBox.style.backgroundImage = randomImage;
    newBox.classList.add(randomDim, 'box', 'box-shadow-dark');
    boxContainer.appendChild(newBox);
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.