<div class="container">
  <div class="outer">
    <div class="puzzle">
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
      <div class="piece"></div>
    </div>
    <div class="bg">
      <h3>Hover me</h3>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Temporibus ipsa illo veritatis alias assumenda pariatur accusantium officia animi modi soluta?</p>
      <a href="">Button</a>
    </div>
    <div class="border"></div>
  </div>
</div>


:root {
  --bg-img: url(https://i.pinimg.com/originals/f3/c4/81/f3c481ab08574d32eae95a90a2648048.png);
}


* {
  box-sizing: border-box;
  transform-style: preserve-3d;
}

body {
  display: grid;
  place-items: center;
  margin:* 0;
  min-height: 100vh;
  background-color: hsl(222,50%,5%);
  font-family: sans-serif;
  color: #ffffff;
}

.outer {
  width: 260px;
  height: 325px;
  position: ralative;
  transform-origin: 50% 100%;
  transform:
    perspective(0px)
    rotateZ(0deg)
    rotateY(0deg);
  transition: transform 3s ease-out;
}
.container:hover .outer {
  transform:
    perspective(850px)
    rotateZ(-30deg)
    rotateY(50deg);
}
.puzzle {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
  height: 100%;
  background-color: #454545;
  background-image: var(--bg-img);
  background-size: 100% 100%;
  background-position: left top;
  background-blend-mode: multiply;
}
.piece {
  background-image: var(--bg-img);
  background-size: 300% 300%;
  background-position: left top;
}
.piece:nth-of-type(1) {
  transform: translateZ(25vmin)
}
.piece:nth-of-type(2) {
  transform: translateZ(20vmin);
  background-position: center top;
}
.piece:nth-of-type(3) {
  transform: translateZ(15vmin);
  background-position: right top;
}
.piece:nth-of-type(4) {
  transform: translateZ(10vmin);
  background-position: left center;
}
.piece:nth-of-type(5) {
  transform: translateZ(5vmin);
  background-position: center center;
}
.piece:nth-of-type(6) {
  transform: translateZ(10vmin);
  background-position: right center;
}
.piece:nth-of-type(7) {
  transform: translateZ(15vmin);
  background-position: left bottom;
}
.piece:nth-of-type(8) {
  transform: translateZ(20vmin);
  background-position: center bottom;
}
.piece:nth-of-type(9) {
  transform: translateZ(25vmin);
  background-position: right bottom;
}
.bg {
  padding: 0.7rem 1.5rem;
  position: absolute;
  top: 1rem;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  background-color: hsl(0,0%,0%,0.6);
  transform: translateZ(35vmin)
}
h3 {
  transform: translateZ(4vmin)
}
p {
  line-height: 1.3rem;
  transform: translateZ(4vmin)
}
a {
  display: inline-block;
  padding: 0.5rem 1rem;
  color: #ffffff;
  text-decoration: none;
  border: solid 1px hsl(222,50%,70%);
  border-radius: 4px;
  transform: translateZ(7vmin);
}
.border {
  width: 105%;
  height: 105%;
  border: dashed 3px hsl(222,50%,70%,0.3);
  position: absolute;
  top: 50%;
  left: 50%;
  transform:
    translate(-50%, -50%)
    translateZ(20vmin)
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.