svg clippath для div, который содержит другие div (без css: clip-path)

Question

Я на самом деле пытаюсь сделать что-то, что звучит очень просто, но, очевидно, это не

У меня есть 2 div, содержащие информацию (текстовые изображения и т. Д.). Я хочу наложить на них обтравочную маску (форму круга), поэтому, если я наведу на нее мышь, она изменится на прямоугольник и покажет все содержимое (этот эффект довольно распространен, нет?) Но, очевидно, я не могу даже выполнить задание наложить круговую обтравочную маску на мои дивы

вот что я попробовал

body {
  
  background-color:#000;
}

<svg> 
        <defs>
        <clipPath viewBox="0 0 100 100" id="promopath" >
                <circle cx="100" cy="100" r="75" />
          </clipPath>
        </defs>
        
        <use clip-path='url(#promopath)' xlink:href='#promo_bubble' fill='white' />
        
    </svg>
    <div class='promo_wrapper' id='promo_bubble'>
    
        <div class='promo_holder'><img src='https://picsum.photos/200/300'></div>
        <div class='promo_holder'><img src='https://picsum.photos/200/300'></div>
        
    </div>

Codepen здесь, если вы хотите поиграть

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

Я не хочу использовать clip-path из-за поддержки edge и internet explorer

Спасибо за вашу помощь

Answer 1

Вы можете рассмотреть трюк, используя border-radius без какого-либо сложного кода или использования SVG:

.box {
  margin: 100px;
  width: 50px;
  height: 50px;
  border: 2px solid;
  border-radius: 50%;
  overflow:hidden;
  background:#fff;
  transition:1s all;
}
.container {
  width:200px;
  height:200px;
  border:1px solid;
  transform:translate(calc(25px - 50%),calc(25px - 50%));
  transition:1s all;
}
img {
 float:left;
}
.box:hover {
  border-radius:0;
  width: 200px;
  height: 200px;
  margin:0;
}
.box:hover .container{
  transform:translate(0);
}

body {
 margin:0;
 background:pink;
}

<div class="box">
  <div class="container">
    <img src="https://picsum.photos/100/100?image=1069" > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et felis ligula. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi tempor pellentesque lacus id ullamcorper.
  </div>
</div>