圆形覆盖图不会伸展100％

Question

我正在试图动态填充带有悬停时的图片的圆形，将显示橙色色调。但是，我有一个奇怪的橙色边框的图片。关于如何“拉伸”图片以覆盖橙色的任何想法？先谢谢你！下面的代码：

HTML代码：

<div class='overlay'> 
    <div class='circle' style='background:url(http://www.bigpicture.in/wp-content/uploads/2010/08/BlackAndWhitePortraitsPhotography26.jpg) 100% no-repeat;background-size:cover'> 
</div> 

CSS代码：

.circle { 
    float: left; 
    background: #d9d6d1; 
    width: 180px; 
    height: 180px; 
    border-radius: 50%; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    -moz-transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -ms-transition: all 0.5s; 
    -o-transition: all 0.5s; 
    transition: all 0.5s; 
    opacity:1; 
    filter:alpha(opacity=100); 
} 

.circle:hover { 
    opacity: 0.5; 
    filter:alpha(opacity=50); 
} 

.overlay { 
    float: left; 
    background:#fd761f; 
    margin: 5px; 
    width: 180px; 
    height: 180px; 
    border-radius: 50%; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
} 

的jsfiddle：http://jsfiddle.net/hpPpD/

Answer 1

这个工作对我来说：

.overlay:hover { 
    float: left; 
    background:#fd761f; 
    width: 180px; 
    height: 180px; 
    border-radius: 50%; 
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
} 

我已经改变了所添加:hover到.overlay类和删除margin:5px

注唯一的东西：一个形象得到圆角和CSS调整大小的方式取决于它的原始大小。