HTML/CSS - 鼠标悬停过渡问题

Question

首先这是代码片段: 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;
 }   

- chandan

Answer 1

您只需要将 border-radius 应用到 .overlay div 上即可。

.overlay{
    border-radius: 50%;
}

工作中使用FIDDLE

- aniskhan001

Answer 2

只需将相同的边界半径应用于叠加元素。此外，由于半径是直径的一半，声明50％的边界半径就足够了：）

.overlay{
    border-radius: 50%;
    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;
}

请在此处查看代码片段：http://jsfiddle.net/teddyrised/C7D89/2/

- Terry