html - 使用 CSS 实现图像悬停效果的有机形状

Question

我有一个关于有机形状图像的任务，我希望悬停时的背景颜色像那个特定的有机形状图像。我没有在具有背景颜色的图像上获得悬停效果。我已经尝试了很多，但我做错的地方并没有出现。任何人都可以指出正确的方向来解决我的问题吗？ 提前致谢...

.at-organic-shape {
  position: relative;
  height: 500px;
  width: 500px;
}
.at-organic-shape figure img:hover {
  background-color: #6495ED;
  border-radius: 35% 80% 65% 70%/50% 65% 70% 85%;
  transition: all 0.5s linear;
}

<div class="at-organic-shape">
  <figure>
    <img src="https://image.ibb.co/nHDcuq/1-F19-F06-C-0-F3-E-4055-B0-E5-1-D73728-A7730.png" class="img1"/>
  </figure>
</div>

Answer 1

你可以尝试使用一个伪元素和一个mix-blend-mode来隐藏颜色溢出:

.at-organic-shape {
  position: relative;
  height: 500px;
  width: 500px;
}
.at-organic-shape figure {
  position:relative;
  background:#fff;
}
.at-organic-shape figure:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:transparent;
  mix-blend-mode: color;
  transition: all 0.5s linear;
}
.at-organic-shape figure:hover::after {
  background:#6495ED;
}

<div class="at-organic-shape">
  <figure>
    <img src="https://image.ibb.co/nHDcuq/1-F19-F06-C-0-F3-E-4055-B0-E5-1-D73728-A7730.png" class="img1"/>
  </figure>
</div>