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

我可以在单个图像上蒙版，但不能像我的示例中那样对整个容器进行蒙版

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

包含其他div的div上的svg clippath（无css：clip-path）

1 个答案: