<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="tiler">
<img src="https://picsum.photos/1000/600?image=1067" />
</div>
<div class="tiler">
<img src="https://picsum.photos/1000/600?image=1061" />
</div>
<div class="tiler">
<img src="https://picsum.photos/1000/600?image=1057" />
</div>
<div class="tiler">
<img src="https://picsum.photos/1000/600?image=1052" />
</div>
<div class="tiler">
<img src="https://picsum.photos/1000/600?image=1043" />
</div>
<div class="tiler">
<img src="https://picsum.photos/1000/600?image=1055" />
</div>
<div class="tiler">
<img src="https://picsum.photos/1000/600?image=1036" />
</div>
<div class="tiler">
<img src="https://picsum.photos/1000/600?image=1037" />
</div>
<div class="tiler">
<img src="https://picsum.photos/1000/600?image=1039" />
</div>
.tiler {
display: inline-block;
cursor: pointer;
visibility: hidden;
width: 33.3%;
margin: auto;
}
.tiler img {
display: block;
margin: auto;
max-width: 100%;
visibility: visible;
}
.tiler .cell-grid {
background-position: center center;
margin: auto;
position: fixed;
top: 1em;
bottom: 1em;
left: 1em;
right: 1em;
z-index: 10;
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 .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 {
.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; }
console.clear();
Splitting({
target: '.tiler',
by: 'cells',
rows: 3,
columns: 3,
image: true
}); //Image('.tiler-overlay', { rows: 3, cols: 3 });
