如何获得圆圈悬停效果

Question

如何实现圆形悬停效果，如附图（右下图）

Here is the fiddle link

以下是相关的css：

.box_details {
  float:left;
  width:200px;
  height:200px;
  margin-right:35px;
  background-color:#fff;

  border-radius:3px;
  box-shadow: 0px 6px 19px 16px rgba(239,242,245,1);
}

.box_details:hover {
background-color:#f4f6f8;
color:#939bc5;
}

Answer 1

您可以创建一个宽度大于其父元素的圆圈并将其居中。请查看代码段以进行演示。

＆＃13;

＆＃13;

.box_details {
  float: left;
  width: 200px;
  height: 200px;
  margin-right: 35px;
  background-color: #fff;
  display: block;
  position: relative;
  border-radius: 3px;
  box-shadow: 0px 6px 19px 16px rgba(239, 242, 245, 1);
  overflow: hidden;
}

.box_details:hover .circle {
  margin-top: 140px;
  transition-duration: 0.4s;
}

p {
  text-align: center;
}

.circle {
  position: absolute;
  width: 200%;
  height: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: lightgrey;
  border-radius: 50%;
  margin-left: -50%;
  margin-top: 250px;
  transition-duration: 0.4s;
}

＆＃13;

<div class="box_details">
  <div class="circle">
    <p>Hi!</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;