SplittingImage Hover Gallery

index.html

<div class="tiler">
  <img src="https://picsum.photos/1000/600?image=1067" />
  <div class="tiler-overlay" data-image="https://picsum.photos/1000/600?image=1067"></div>
</div>

<div class="tiler">
  <img src="https://picsum.photos/1000/600?image=1061" />
  <div class="tiler-overlay" data-image="https://picsum.photos/1000/600?image=1061"></div>
</div>

<div class="tiler">
  <img src="https://picsum.photos/1000/600?image=1057" />
  <div class="tiler-overlay" data-image="https://picsum.photos/1000/600?image=1057"></div>
</div>


<div class="tiler">
  <img src="https://picsum.photos/1000/600?image=1052" />
  <div class="tiler-overlay" data-image="https://picsum.photos/1000/600?image=1052"></div>
</div>


<div class="tiler">
  <img src="https://picsum.photos/1000/600?image=1043" />
  <div class="tiler-overlay" data-image="https://picsum.photos/1000/600?image=1043"></div>
</div>


<div class="tiler">
  <img src="https://picsum.photos/1000/600?image=1055" />
  <div class="tiler-overlay" data-image="https://picsum.photos/1000/600?image=1055"></div>
</div>


<div class="tiler">
  <img src="https://picsum.photos/1000/600?image=1036" />
  <div class="tiler-overlay" data-image="https://picsum.photos/1000/600?image=1036"></div>
</div>


<div class="tiler">
  <img src="https://picsum.photos/1000/600?image=1037" />
  <div class="tiler-overlay" data-image="https://picsum.photos/1000/600?image=1037"></div>
</div>


<div class="tiler">
  <img src="https://picsum.photos/1000/600?image=1039" />
  <div class="tiler-overlay" data-image="https://picsum.photos/1000/600?image=1039"></div>
</div>

script.js

console.clear();

SplittingImage('.tiler-overlay', { rows: 3, cols: 3 });

scripts

<script src="https://unpkg.com/[email protected]/dist/splitting.js"></script>
<script src="https://codepen.io/shshaw/pen/5eb6d4e9bfd78e3911ed9d0d0dfce69b"></script>

splittingimage-hover-gallery.markdown

SplittingImage Hover Gallery

A Pen by Shaw on CodePen.

License.

style.scss

.tiler {
  position: relative;
  display: inline-block;
  cursor: pointer;
  visibility: hidden;
  width: 33.3%;
  margin: auto;
}

.tiler img { 
  display: block;  
  margin: auto; 
  max-width: 100%;
  visibility: visible;
}

.tiler-overlay {
  background-position: center center;
  margin: auto;
  position: fixed;
  top: 1em;
  bottom: 1em;
  left: 1em;
  right: 1em;
  
  max-width: 1000px;
  max-height: 600px;

  perspective: 30px;
  
  // &:before {
  //   content: '';
  //   display: block;
  //   visibility: visible;
  //   position: absolute;
  //   top: 0; right: 0; bottom: 0; left: 0;
  //   margin: auto;
  //   box-shadow: 0 1em 2em rgba(0,0,0,0.3);
  // }
}

.tiler-overlay .split-cell { 
  pointer-events: none;
  opacity: 0;

  transform: translateZ(-15px);
  transform-style: preserve-3d;

  transition-property: transform, opacity;
  transition-duration: 0.5s, 0.4s;
  transition-timing-function: cubic-bezier(.65,.01,.15,1.33);//, linear;

  /* The center character index */
  --center-x: calc((var(--col-total) - 1) / 2);
  --center-y: calc((var(--row-total) - 1) / 2);

  /* Offset from center, positive & negative */
  --offset-x: calc(var(--col-index) - var(--center-x));
  --offset-y: calc(var(--row-index) - var(--center-y));

  /* Absolute distance from center, only positive */
  --distance-x: calc(
    (var(--offset-x) * var(--offset-x)) / var(--center-x)
  );

  /* Absolute distance from center, only positive */
  --distance-y: calc(
    (var(--offset-y) * var(--offset-y)) / var(--center-y)
  );

  transition-delay: calc( 0.1s * var(--distance-y) + 0.1s * var(--distance-x) );
}

// .tiler { transition: z-index 0.3s linear; }

.tiler-overlay { z-index: 2; }
.tiler:hover {
 
  .split-cell { 
    // pointer-events: auto;
    transform: scale(1);
    opacity: 1; 
  
  }
}


html { height: 100%; display: flex; background: #323643; }
body { display: flex; flex-wrap: wrap; max-width: 800px; padding: 2em; margin: auto; }

styles

<link href="https://unpkg.com/[email protected]/dist/splitting-cells.css" rel="stylesheet" />