Исчезать изображение радиально от середины до краев с TweenLite

Question

У меня есть изображение, см. Ниже:

что я хотел бы разместить абсолют на моей странице с помощью следующего CSS:

.bg-slide21-layer-3 {
    background-image: url('/images/slide21/bg_layer3.png');
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    background-repeat: none;
    height: 46vh;
    width: 78.5vw;
    z-index: -8;
    position: absolute;
    top: 0vw;
    right: 0;
    left: -0.5vw;
    opacity: 1;
 }

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

Интуитивно я попытался добавить обложку для элемента, чтобы HTML-код был следующим:

<div class='bg-slide21-layer-3-cover'>
    <div class='bg-slide21-layer-3'></div>
</div>

с обложкой CSS следующим образом:

.bg-slide21-layer-3-cover {
    width: 10%;
    height: 10%;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    overflow: hidden;
    z-index: -5;
    opacity: 1;
}

и использовать этот вид Tween:

TweenMax.to(
        $('.bg-slide21-layer-3-cover'), 
        2, 
        { opacity: 1, width: "100vw", height: "100vh", ease:Power1.easeNone }
    );

с намерением сделать маленький div в середине расширить наружу. Тем не менее, это не работает, потому что мое внутреннее изображение (.bg-slide21-layer-3) абсолютно расположено по отношению к div обложки в середине, так что эффект выглядит как его исчезновение из левого нижнего угла.

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

Благодарю.

Answer 1

Вы можете использовать круглую коробку и изменить ее масштаб

div {
  position:relative;
  background-repeat: none;
  height: 46vh;
  width: 78.5vh;
  overflow:hidden;
  border:solid;
}
div:before {
  position:absolute;
  content:'';
  display:block;
  height:25%;
  width:15%;
  top:70%;
  left:57%;
 background-image: url(https://stackru.com/images/79fac28f32e9ab87176a240997a0366a6a8dc44a.png);
  background-size: 650% 400%;
  background-position: 67% 93%;
  transition:1s linear;
  border-radius:100%;
  
}
div:hover:before {
  background-size:100% 100%;
  height:100%;
  width:100%;
  top:0;
  left:0
}
body {background:linear-gradient(to top left, lightgray, white,gray);

<div>
</div>