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>

Answer 2

好的，你可以尝试一下

.at-organic-shape figure img:hover { -webkit-filter: drop-shadow(1px 1px 0 #6495ED) drop-shadow(-1px -1px 0 #6495ED); filter: drop-shadow(1px 1px 0 #6495ED) drop-shadow(-1px -1px 0 #6495ED); border-radius: 35% 80% 65% 70%/50% 65% 70% 85%; transition: all 0.5s linear; }

。这会在图像周围为您提供黑色轮廓。如果您想要其他颜色，则可以更改。那是你想要的吗？

CSS的自然形状可实现图像悬停效果

2 个答案: