这是我仅使用 css 的看法,但图像未居中,而且图像变大而不是蒙版
我想在这里达到同样的效果
http://jackietrananh.com/portfolio.php
他正在使用http://jackietrananh.com/img/sprite-s82d3b02845.png图片,但是使用纯CSS或JS怎么办?
并且没有
clip-path
我将按如下方式完成此操作: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%;
}
示例:代码笔