Сделать обрезку блока с помощью overflow и border-radius, но оставить содержимое фиксированным

Question

Нужно сделать обрезку блока, который растягивается на всю высоту окна, путем обрезки через overflow и border-radius.

Пример ниже.

Анимация тоже будет, с изменением паддинга и радиуса.

Проблема в том, что у меня не получилось сделать так, чтобы изображение оставалось всё-таки фиксированным. Когда анимация проигрывается, картинка тоже двигается, потому что двигается по верстке.

Собственно, прошу помощи, как это можно решить?

Codepen

body {
  margin: 0px;
  padding: 0px;
}

.test {
  box-sizing: border-box;
  overflow: hidden;
  height: 100vh;
  transition: padding 300ms ease;
  padding: 0px;
  border-radius: 0px;
}

.test:hover {
  padding: 30px;
}

.test:hover .img-wrapper {
  border-radius: 20px;
}

.img-wrapper {
  height: 100%;
  width: 100%;
  transition: border-radius 300ms ease;
  overflow: hidden;
}

.img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url("https://placeimg.com/1000/1000/arch");
  background-size: cover;
}

<div class="test">
  <div class="img-wrapper">
    <div class="img"></div>
  </div>
</div>

Answer 1

Надеюсь, что достиг требуемого эффекта. Свойство background-clip Вам в помощь:

body { margin: 0; /* Only for demo --> */ height: 100vh; background-color: rgba(255, 255, 255, 1); background-image: url('https://i.stack.imgur.com/m9NKc.png'), radial-gradient(#fff8, #000f); background-position: 0% 0%; background-repeat: no-repeat; background-size: auto; }

.test { height: 100vh; }

.img-wrapper {
  height: 100%;
  width: 100%;
}

.img {
  width: 100%;
  height: 100%;
  padding: 0px;
  border-radius: 0px;
  box-sizing: border-box;
  background-image: url("https://placeimg.com/1000/1000/arch");
  background-size: cover;
  background-position: center;
  background-clip: content-box;
  transition: padding .3s ease, border-radius .3s ease;
}
.test:hover .img {
  border-radius: 50px;
  padding: 30px;
}

<div class="test">
  <div class="img-wrapper">
    <div class="img"></div>
  </div>
</div>

БЛОГ НА HUSL

Сделать обрезку блока с помощью overflow и border-radius, но оставить содержимое фиксированным

Ответы (1 шт):