SplittingImage Palette

index.html

<div class="palette" data-cols="10" data-rows="10"></div>

script.js

console.clear();

SplittingImage('.palette');

scripts

<script src="https://unpkg.com/splitting-image/splitting-image.js"></script>
<script src="https://codepen.io/shshaw/pen/epmrgO"></script>

splittingimage-palette.markdown

SplittingImage Palette

A Pen by Shaw on CodePen.

License.

style.scss

.palette .split-cell{
  /* Generate the rainbow! */
  background: hsl(
    calc( 360 * var(--col-index) / var(--col-total) ),
    75%,
    calc( 5% + (90% * (1 - var(--row-index) / var(--row-total))) )
  );

  visibility: visible; /* The split-cell is hidden by default for background-image based SplittingImage uses */
}

/* Hover Effect */

.palette .split-cell {  
  transition: transform 0.2s cubic-bezier(.75,0,.15,1);
  transition-property: transform, box-shadow;
  box-shadow: 0 0em 0em transparent;
}

.palette .split-cell:hover {
  transform: scale(1.25);
  box-shadow: 0 1em 2em rgba(0,0,0,0.3);
  z-index: 2;
}

/* //////////////////////////////////////// */

.palette {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
}

styles

<link href="https://unpkg.com/splitting-image/splitting-image.css" rel="stylesheet" />