%div{:class => "wrapper"}
  %ul{:class => "products"}
    - (1..30).each do |i|
      %li
        %div{:style => "background-image: url(https://source.unsplash.com/random?-#{i})"}
View Compiled
*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  background: rgb(35,85,88);
}

.wrapper {
  transform: scale(1, 0.5);
}

.products {
  padding: 0;
  margin: 0;
  width: 500px;
  transform: rotate(-45deg);
  
  li {
    transition: box-shadow 0.5s, transform 0.5s, opacity 1s;
    list-style-type: none;
    width: 23.333333333%;
    float: left;
    background: #fff;
    height: 150px;
    margin: 1.5%;
    position: relative;
    transform: translate3d(0, 0, 0);
    overflow: hidden;
    border-radius: 10px;
    box-shadow: -2px 2px 0 0 rgba(122, 122, 122, 1), -4px 4px 0 0 rgba(122, 122, 122, 1), -6px 6px 0 0 rgba(122, 122, 122, 1), -8px 8px 0 0 rgba(122, 122, 122, 1), -50px 50px 120px 20px rgba(0, 0, 0, 0.5);
    
    &.hidden {
      transform: translate3d(-100px, 100px, 0);
      opacity: 0 !important;
      box-shadow: -2px 2px 0 0 rgba(122, 122, 122, 1), -4px 4px 0 0 rgba(122, 122, 122, 1), -6px 6px 0 0 rgba(122, 122, 122, 1), -8px 8px 0 0 rgba(122, 122, 122, 1), -10px 10px 2px 2px rgba(0, 0, 0, 0.2);
    }
    > div {
      transform: translate(-50%, -50%);
      position: absolute;
      top: 50%;
      left: 50%;
      width: 70%;
      height: 70%;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
    }
  }
}
View Compiled
$(() => {
  const $products = $(".products").children();

  const toggle = $product => {
    $product.toggleClass("hidden");
  }
  
  const randomProductToggle = () => {
    setTimeout(() => {
      toggleRandom();
      randomProductToggle();
    }, Math.random() * 1000)
  };
  
  const toggleRandom = () => {
    const random = Math.floor((Math.random() * $products.length) + 1);
    const $product = $products.eq(random);
    
    toggle($product);
  }

  const setInitialZindex = () => {
    let column = 3;
    
    $products.each((i, product) => {
      $(product).css({
        "z-index": column * 100 + i
      });

      column--;

      if (column === 0) {
        column = 3;
      }
    });
  };

  $products.on("click", function() {
    toggle($(this));
  });

  setInitialZindex();
  randomProductToggle();
});
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js