如何使圆圈悬停在图像上

Question

.ec-circle{
width: 420px;
height: 420px;
-webkit-border-radius: 210px;
-moz-border-radius: 210px;
border-radius: 50%;
text-align: center;
overflow: hidden;
font-family:'Kelly Slab', Georgia, serif;
background: #dda994 url(../images/1.jpg) no-repeat center center;
box-shadow:
    inset 0 0 1px 230px rgba(0,0,0,0.6),
    inset 0 0 0 7px #d5ad94;
transition: box-shadow 400ms ease-in-out;
display: block;
outline: none;
}

上面的代码就像我想要的但不满足我的需要.

我希望圈子悬停在我的图像上.

它是分辨率为230 x 231的图像.当悬停在图像上时,
它将仅显示圆形部分.

怎么会这样？

Answer 1

您只需要在悬停时更改图像的边框半径

img:hover{border-radius:50%}

边注

而不是计算图像大小的一半,并将其赋予图像边界半径值,只需给50%它!

在这里查看演示