Jquery 凹凸形div

我正在处理div的凹凸形状。我想要一个凹面形状，鼠标悬停，它就会变成凸面。谁能给我指出正确的方向吗？到目前为止，这是我尝试过的示例代码，下面是图片

部分{
位置：相对位置；
溢出：隐藏；
填充：50px0；
}
.内部{
位置：相对位置；
背景：黑色；
高度：120px；
}
.内：之后{
盒影：080px#000；
边界半径：100%；
位置：绝对位置；
高度：150像素；
内容：''；
右图：-20%；
左-20%；
最高：100%；
过渡：所有0.4缓进缓出；
}
.内：之后{
底部：100%；
顶部：自动；
}
.内部：悬停：之后{
身高：0；
}

---

你很接近。您可以使用

：before

和“：after”来实现该功能<代码>：之前几乎与“：之后”相同，只是差异

顶部

位置

.card{
高度：100px；
背景色：番茄；
}
.科{
顶部：50px；
位置：相对位置；
溢出：隐藏；
填充：50px0；
}
.内部{
位置：相对位置；
背景：黑色；
高度：120px；
}
.内：之后{
盒影：080px#000；
边界半径：100%；
位置：绝对位置；
高度：150像素；
内容：''；
右图：-20%；
左-20%；
顶部：-150px；
过渡：所有0.4缓进缓出；
}
.内部：悬停：之后{
顶部：-120px；
}
.内尔：以前{
盒影：080px#000；
边界半径：100%；
位置：绝对位置；
高度：150像素；
内容：''；
右图：-20%；
左-20%；
顶部：130像素；
过渡：所有0.4缓进缓出；
}
.内部：悬停：之前{
顶部：50px；
}

您可以使用它来获得更好的悬停响应和过渡速度。我在这里尝试添加弹性类型效果，但没有实现。您不知道应该如何添加此效果。尝试了解代码的工作原理，然后应用它。这与这个问题无关。