<container>
  <mask>
    <img src="https://images.unsplash.com/photo-1583506140156-6e343f045b81?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjM2Nzc2MjY&ixlib=rb-1.2.1&q=80&w=800" />
    <img src="https://images.unsplash.com/photo-1470290449668-02dd93d9420a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjM2Nzc2MjY&ixlib=rb-1.2.1&q=80&w=800" />
    <img src="https://images.unsplash.com/photo-1530625243345-797b4c1836ee?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjM2Nzc2MjY&ixlib=rb-1.2.1&q=80&w=800" />
    <img src="https://images.unsplash.com/photo-1531171047414-9f2cdc733755?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjM2Nzc2MjY&ixlib=rb-1.2.1&q=80&w=800" />
    <img src="https://images.unsplash.com/photo-1521942132694-5daae96ff62d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjM2Nzc2MjY&ixlib=rb-1.2.1&q=80&w=800" />
    <img src="https://images.unsplash.com/photo-1529958986175-1cacd1317691?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjM2Nzc2MjY&ixlib=rb-1.2.1&q=80&w=800" />
    <img src="https://images.unsplash.com/photo-1517315003714-a071486bd9ea?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjM2Nzc2MjY&ixlib=rb-1.2.1&q=80&w=800" />
    <img src="https://images.unsplash.com/photo-1529738609971-27263e03fce4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjM2Nzc2MjY&ixlib=rb-1.2.1&q=80&w=800" />
    <img src="https://images.unsplash.com/photo-1578943195665-f23d690b92d3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjM2Nzc2MjY&ixlib=rb-1.2.1&q=80&w=800" />
    <img src="https://images.unsplash.com/photo-1529832393073-e362750f78b3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjM2ODQwMTg&ixlib=rb-1.2.1&q=80&w=800" />
    <img src="https://images.unsplash.com/photo-1496450681664-3df85efbd29f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjM2ODQwMjc&ixlib=rb-1.2.1&q=80&w=800" />
    <img src="https://images.unsplash.com/photo-1493130952181-47e36589f64d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjM2ODQwMjc&ixlib=rb-1.2.1&q=80&w=800" />
  </mask>
</container>
<p>Click on me for some magic ✨</p>

html {
  --vh: 1vh;
}
body {
  margin: 0;
  font-family: 'Raleway', sans-serif;
  --clipWidth: 50vmin;
  --clipHeight: 25vmin;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

container {
  filter: drop-shadow(0px 3px 7px rgba(0,0,0,0.2));
}
mask {
  clip-path: inset(
    calc(50% - (var(--clipHeight) / 2))
    calc(50% - (var(--clipWidth) / 2))
    round 15px);
  
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6, 33vh);
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  height: calc(var(--vh) * 100);
  cursor: pointer;
  background: #000;
  overflow: hidden;
}
@media (min-width: 920px) {
  mask {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 34vh);
  }
}


container.is-open mask {
  clip-path: inset(0 0);
  
  cursor: auto;
  overflow: auto;
  transition: 1.2s cubic-bezier(0.55, 0.02, 0.25, 1.02);
}

p {
  position: fixed;
  top: calc(50% + (var(--clipHeight) / 2) + 10px);
  margin: 0;
  left: 0;
  text-align: center;
  width: 100%;
  pointer-events: none;
  transition: 0.3s ease-in-out;
}
container.is-open + p {
  opacity: 0;
  transform: translateY(20px);
}

document.querySelector('container').addEventListener('click', function () {
  this.classList.add('is-open');
});


/* Hack for Safari and viewport units */
const calcViewportUnits = () => {
  const vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
};
calcViewportUnits();
window.addEventListener('resize', calcViewportUnits);