Как я могу перекрыть два изображения, повернуть верхнее изображение, отображая только одну его часть?

Question

Я пытаюсь повернуть карточку, при наведении, эффект, которого я хочу добиться, состоит в том, чтобы фон изображения карточки, такой же, как весь фон страницы, получался и вращался вместе с карточкой.

Как и в этом видео https://www.youtube.com/watch?v=IM7YWJ0U6Vs&t=314s

Я дважды пытался использовать фоновое изображение, но я могу найти способ скрыть остальную часть фонового изображения.

Это то, что я пытался, во фрагменте, чтобы быть более точным, я пытаюсь сделать так, чтобы листья вращались при наведении вместе с карта.

*{
margin: 0;
padding: 0;
}

.container {
  background-image: url(https://images.unsplash.com/photo-1477414348463-c0eb7f1359b6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80);
  background-position: center;
  background-size: cover;
  width: 100vw;
  height: 100vh;
}

.inner {
  background-image: url(https://images.unsplash.com/photo-1477414348463-c0eb7f1359b6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80;);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 50px 80px;
}

.card-wrap {
  width: 240px;
  height: 280px;
  position: relative;
  margin: 3vw;
    padding: 10px;
  list-style: none;
}


.card-wrap:hover {
  box-shadow: rgba(0, 0, 0, 0.72) 0 0 32px 5px;
  transform: rotate(12deg);
  transition: all 0.5s ease;
}

<div class="container">
      <ul class="inner" id="inner">
        <li class="card-wrap" id="card-wrap">
          <span class="card">
            <img
              class="icon"
              src="https://img.icons8.com/ios/50/000000/soil.png"
            />
            <h1 class="title">Title</h1>
            <p>
              Pasture he invited mr company shyness. But when shot real her.
            </p>
          </span>
        </li>
        </ul>
        </div>

Answer 1

Одна идея - спрятать ненужную деталь, используя большую тень:

* {
  box-sizing:border-box;
  margin:0;
  padding:0;
}
.container {
  background-image: url(https://images.unsplash.com/photo-1477414348463-c0eb7f1359b6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80);
  background-position: center;
  background-size: cover;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 50px 80px;
}


.card-wrap {
  width: 240px;
  height: 280px;
  position: relative;
  margin: 3vw;
  padding: 10px;
  list-style: none;
  box-shadow:
        rgba(0, 0, 0, 0) 0 0 32px 5px,
        0 0 0 calc(100vh + 100vw) #fff;
  transition: all 0.5s ease;
}

.card-wrap:hover {
  box-shadow: 
        rgba(0, 0, 0, 0.72) 0 0 32px 5px,
        0 0 0 calc(100vh + 100vw) #fff;
  transform: rotate(12deg);
}

<div class="container">
  <ul class="inner" id="inner">
    <li class="card-wrap" id="card-wrap">
      <span class="card">
            <img
              class="icon"
              src="https://img.icons8.com/ios/50/000000/soil.png"
            />
            <h1 class="title">Title</h1>
            <p>
              Pasture he invited mr company shyness. But when shot real her.
            </p>
          </span>
    </li>
  </ul>
</div>