[英]How to get circle hover effect
How can I achieve rounded hover effect like in the attached image (at the right bottom pic) 如何实现如上图所示的圆形悬停效果(如右下图所示)
Here is the fiddle link 这是小提琴链接
Here is the relevant css: 这是相关的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;
}
You can make a circle that has a bigger width than its parent element and center it. 您可以制作一个宽度大于其父元素的宽度并将其居中。 Check the code snippet for a demonstration of this. 检查代码片段以对此进行演示。
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.