Warm tip: This article is reproduced from serverfault.com, please click

javascript-如何在图像上制作圆形蒙版

(javascript - How to make a round mask over a image)

发布于 2015-05-07 13:46:59

这是我仅使用 css 的看法,但图像未居中,而且图像变大而不是蒙版

jsfiddle 演示

我想在这里达到同样的效果

http://jackietrananh.com/portfolio.php

他正在使用http://jackietrananh.com/img/sprite-s82d3b02845.png图片,但是使用纯CSS或JS怎么办?

并且没有

clip-path
Questioner
grape1
Viewed
11
David Calvin 2015-05-07 22:39:19

我将按如下方式完成此操作: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%;
}

示例:代码笔