如何獲得圓形懸停效果

Question

如何實現如上圖所示的圓形懸停效果（如右下圖所示）

這是小提琴鏈接

這是相關的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

您可以制作一個寬度大於其父元素的寬度並將其居中。 檢查代碼片段以對此進行演示。

 .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; } 

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