<div class="box">
  <h2>Jelly Fish</h2>
  <img src="https://picsum.photos/id/1069/400/250">
</div>
<div class="box">
  <h2>Kayak Day</h2>
  <img src="https://picsum.photos/id/1011/400/250">
</div>

img {
  /* adjust the below to control the 3D effect */
  --x: 10px;
  --y: 20px;
  transform: perspective(1000px) rotateX(var(--_a,40deg));
  /* */
  clip-path: polygon(       
     var(--y)              var(--y),       
     calc(100% - var(--y)) var(--y),       
     calc(100% - var(--y)) calc(100% - var(--y)),       
     calc(100% - var(--y) - var(--x)) var(--_c,100%),       
     calc(var(--x) + var(--y))        var(--_c,100%),      
     var(--y)        calc(100% - var(--y))       
     );
  outline: var(--y) solid rgba(0,0,0,0.4);
  outline-offset: calc(-1*var(--y));
  padding: var(--y) var(--y) 0 var(--y);
  transition: 1s;
}
.box:hover img {
  --_a: 0deg;
  --_c: calc(100% - var(--y));
}

/* the below is irrelevant to the 3D effect */
.box {
  cursor: pointer;
}
h2 {
  text-align: center;
  margin: 0;
  font-size: 30px;
  font-weight: bold;
  font-family: sans-serif;
  transform: translateY(250%);
  transition: .8s;
}
.box:hover h2{
  transform: translateY(0%);
  transition: .8s .2s;
}

body {
  background: #ccc;
  display: grid;
  min-height: 100vh;
  grid-auto-flow: column;
  place-content: center;
  gap: 40px;
}

@media (max-width: 900px) {
  body {
    grid-auto-flow: row;   
  }
}