html - 包含其他 div 的 div 上的 svg 剪辑路径(无 css :clip-path)

Question

我实际上是在尝试做一些听起来很简单，但显然不是的东西

我有 2 个包含信息(文本图像等)的 div。我想在上面放一个剪贴蒙版(圆形)，所以如果我将鼠标放在上面，它会变成一个矩形并显示全部内容(这种效果很常见，不是吗？)但显然我什至无法执行在我的 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 here if you want to play around

我可以在单个图像上制作 mask ，但不能像我的示例中那样为整个容器制作 mask

由于边缘和 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>