David Calvin
2015-05-07 22:39:19
I would accomplish this as follows: HTML:
<div class="round">
<img src="http://www.somebodymarketing.com/wp-content/uploads/2013/05/Stock-Dock-House.jpg"/>
</div>
CSS:
.round{
width:10%;
padding-top:10%;
overflow:hidden;
position:relative;
border-radius:50%;
}
img{
position:absolute;
top:50%;
left:50%;
min-width:100%;
height:100%;
transform:translate(-50%,-50%);
transition: 1s ease;
}
img:hover{
height:110%;
}
Example: CodePen
热门帖子
热门github
6