jquery - 凹凸形状div

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

.section {
  position: relative;
  overflow: hidden;
  padding: 50px 0;
}

.inner {
  position: relative;
  background: black;
  height: 120px;
}
.inner:after {
  box-shadow: 0 0 0 80px #000;
  border-radius: 100%;
  position: absolute;
  height: 150px;
  content: '';
  right: -20%;
  left: -20%;
  top: 100%;
	transition: all 0.4s ease-in-out;
}

.inner:after {
  bottom: 100%;
  top: auto;
}

.inner:hover:after {
	height: 0;
}

<div class="section">
  <div class="inner"></div>
</div>

最佳答案

你近了您可以使用:before和'：after'实现该功能。 :before几乎和'：after'一样，只是位置top不同。

.card {
    height: 100px;
    background-color: tomato;
}
.section {
  top: 50px;
  position: relative;
  overflow: hidden;
  padding: 50px 0 0;
}

.inner {
  position: relative;
  background: black;
  height: 120px;
}
.inner:after {
  box-shadow: 0 0 0 80px #000;
  border-radius: 100%;
  position: absolute;
  height: 150px;
  content: '';
  right: -20%;
  left: -20%;
  top: -150px;
	transition: all 0.4s ease-in-out;
}

.inner:hover:after {
	top: -120px;
}

.inner:before {
    box-shadow: 0 0 0 80px #000;
  border-radius: 100%;
  position: absolute;
  height: 150px;
  content: '';
  right: -20%;
  left: -20%;
  top: 130px;
	transition: all 0.4s ease-in-out;
}

.inner:hover:before {
	top: 50px;
}

<div class='card'>
  <div class="section">
    <div class="inner"></div>
  </div>
</div>