HTML/CSS-悬停过渡问题-HTML/CSS-OnHoverTransitionissue

firstly here's the fiddle: http://jsfiddle.net/krish7878/C7D89/

首先是小提琴:http://jsfiddle.net/krish78/c7d89/

There is a container with a image in it, it also has a div with class 'overlay'. What I am trying to achieve is, on mouse hover the circle should be filled with the overlay. It is getting filled but it also shows an awkward from square to circle. How do I get rid of it.

有一个包含图像的容器，它还有一个div，类为“叠加”。我想要实现的是，在鼠标悬停的时候，圆圈应该布满了覆盖。它正在填充，但它也显示了一个尴尬的从正方形到圆形。我怎样才能摆脱它呢?

HTML Code:

HTML代码:

CSS code:

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

2 个解决方案

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