首先这是代码片段: http://jsfiddle.net/krish7878/C7D89/
有一个带有图像的容器,它还有一个类为'overlay'的div。我想实现的是,在鼠标悬停时,圆形应该被覆盖。它被填充了,但也显示出了从正方形到圆形的尴尬过渡。如何摆脱它。
HTML代码:
CSS 代码如下:
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;
}