Переполнение скрыто для пользовательских изображений - PullRequest
Новая
       14

Переполнение скрыто для пользовательских изображений

0 голосов
/ 24 января 2019

Вот 2 слоя изображения:

enter image description here

Рука с телефоном и черной дырой.

HTML-разметка: 

<div class="wrapper">
  <img class="wrapper__image" src="path/to/image.png">
</div>

SCSS: 

.wrapper {
  background: url("path/to/blackhole.png") no-repeat center bottom;
  width: 528px;
  height: 600px;
  overflow: hidden;

  &__image {
    margin-left: 60px;
    margin-top: 5px;
  }
}

Как вы можете видеть, изображение руки с телефоном немного округлено внизу, также округляется черная дыра, поэтому, если я вытолкну руку за пределыwrapper div, на изображении руки внизу будут пробелы.

Есть ли способ протолкнуть изображение руки ниже черной дыры и спрятать его без прозрачных углов на изображении черной дыры:

enter image description here

если бы черная дыра была квадратной формы, то проблем не было бы.

Моя цель - спрятать рукус телефоном в черной дыре, как будто он сползает в дыру.

1 Ответ

0 голосов
/ 24 января 2019

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

Наведите, чтобы увидеть эффект.Вам просто нужно настроить окраску, чтобы она выглядела как ваше изображение. 

.hole {
  width: 300px;
  height: 300px;
  position: relative;
  z-index: 0;
  overflow: hidden;
  border-bottom-right-radius: 50% 50px;
  border-bottom-left-radius: 50% 50px;
}

.hole::before {
  content: "";
  position: absolute;
  z-index: -1;
  height: 100px;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 100%;
  background: radial-gradient(farthest-side at top right, grey, black);
}

img {
  position:absolute;
  top:0;
  left:100px;
  transition:2s all;
}
.hole:hover img {
  top:100%;
}
<div class="hole">
  <img src="https://picsum.photos/100/200?image=1069">
</div>
...