HTML / CSS – 关于悬停转换问题

首先,这里是小提琴： http://jsfiddle.net/krish7878/C7D89/

有一个带有图像的容器,它还有一个带有’overlay’类的div.我想要实现的是,在鼠标悬停时,圆圈应该用叠加层填充.它正在变满,但它也显示出从正方形到圆形的尴尬.我该如何摆脱它.

HTML代码：

<div class="container">
   <img src="#">
   <div class="overlay">
   </div>
</div>

CSS代码：

.container{
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 100%;
    overflow: hidden;
    margin: 0 auto;
    }
 .overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #49c8ff;
    opacity: 0;
    top: 0px;

transition:         all 300ms ease;;
                    -moz-transition:    all 300ms ease;
                    -webkit-transition: all 300ms ease;
                    -o-transition:      all 300ms ease;
                    -ms-transition:     all 300ms ease;
  }
.container:hover .overlay{
    opacity: 1;
 }

解决方法

您只需将border-radius应用于.overlay div.

.overlay{
    border-radius: 50%;
}

工作FIDDLE