Html 如何使菱形内的图像变形为圆形

在过去的几天里，我用CSS和SVG做了很多实验，试图达到这个效果

我有一个菱形的图像，当用户悬停在它上面时，它应该变形成一个圆圈，理想情况下，图像应该变成块颜色

起初我认为我可以使用SVG来实现，我成功地将SVG菱形变形为一个圆形，但下一步是使用图像/块颜色，我认为面具可能是一种方式！我得到的最接近的结果是：

HTML

我可以制作一个圆的动画，但当我试图把它做成一个矩形的时候，它就不起作用了（我甚至都没能看到钻石形状！）

我也尝试过使用纯CSS方法——尽管这会带来一系列问题。我在img标签上应用了这个样式，它按照我想要的方式工作，但是很明显图像是旋转的。当我尝试将图像放入div并将图像旋转回正常状态时，它出现了问题。将鼠标悬停在上方时，图像没有进入圆圈内，尽管DIV上隐藏了溢出

它还存在着悬停时没有覆盖颜色的问题

---

我想知道以前是否有人能做到这一点，他们是否能对此有所了解，以及我的最佳选择是什么，因为我已经没有想法了

这件事引起了我的兴趣，所以我想我应该来一次狂欢

背面可见性：隐藏

是防止图像溢出的关键，正如您在问题中提到的那样

您可以将伪元素（

：before

）用于颜色叠加：

/*第一个示例*/
.包裹{
-webkit变换：旋转（-45度）；
-moz变换：旋转（-45度）；
变换：旋转（-45度）；
浮动：左；
边框：1px纯红；
利润率：150px 0 0 150px；
溢出：隐藏；
过渡：所有0.3秒轻松。3秒；
边界半径：0px；
}
.变形{
-webkit变换：旋转（45度）比例（1.5）；
-莫兹变换：旋转（45度）比例（1.5）；
变换：旋转（45度）比例（1.5）；
浮动：左；
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
背面可见性：隐藏；
}
.包装：之前{
内容：“；
背景：rgba（207,0,0,0.5）；
位置：绝对位置；
排名：0；
底部：0；
左：0；
右：0；
z指数：1；
不透明度：0；
变换：比例（0）；
过渡：所有0.3秒缓解；
}
.wrap:悬停{
边界半径：50%；
}
.wrap:悬停：在{
变换：比例（1）；
不透明度：1；
}

钻石的形状会很复杂，但这可能会在途中有所帮助：谢谢保罗，这真的很有帮助！用你的笔这就是我想到的！这太棒了，我不知道背面的可见度，我完全忘记了使用：以前。谢谢你，我真的很感谢你的帮助！使用您的代码，我删除了float，并将div更改为一个内联块，因为它似乎没有明显的效果，然后我还添加了一些出现在上面的首字母（这将与站点相关）。旋转后的定位有点奇怪，但我猜这是因为锚点改变了。

<div>
  <span></span>
  <img src="http://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg" alt="" />  
</div>

div {
    -webkit-clip-path: circle(100px at center);
    -moz-clip-path: circle(100px, 100px, 100px);
    clip-path: circle(100px, 100px, 100px);
    transition: all 0.3s ease;
    width: 200px; height: 300px;
}

div:hover {
    -webkit-clip-path: circle(40px at center);
    -moz-clip-path: circle(40px, 40px, 40px);
    clip-path: circle(40px, 40px, 40px);
}

span {
    display: block;
    width: 200px; height: 300px;
    background-color: red;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100;
    opacity: 0;
    transition: background-color 0.7s ease;
}

div:hover span {
    opacity: 1;
}