jquery/css 从上到下填充圆形图像

Question

我一直在尝试实现类似的效果，可以在本网站的投资组合部分看到:http://www.richdean.co.uk/当您将鼠标悬停在图像上时。老实说，我一直在试图弄清楚他是如何做到这一点的，这可能非常简单，我们将不胜感激。

谢谢， 英里

Answer 1

你可以这样做: DEMO

<div class="circle" id="circ1">
  <div>+<br>VIEW PROJECT</div>
</div>

<div class="circle" id="circ2">
  <div class="cover">+<br>VIEW PROJECT</div>
</div> 

CSS:

.circle{
  position:relative;
  width:250px;
  height:250px;
  float:left;
  margin:20px;
  background:transparent none no-repeat center center;
  background-size:cover;
  border-radius: 50%;
  overflow:hidden;
}
#circ1{
  background-image: url('bg1.jpg');
}
#circ2{
  background-image: url('bg2.jpg');
}

.circle > div{
  position:absolute;
  height:50px;
  padding:100px 0;
  width:100%;
  text-align:center;
  top:-250px;
  background:#fff;
  transition: top 0.5s;
  -webkit-transition: top 0.5s;
}
.circle:hover > div{
  top:0;
}

基本思想是让一个相对定位圆形元素和一个内部绝对pos.元素初始定位在某个-top值。

圆形元素需要 overflow:hidden 属性才能隐藏内部白色元素。

对于动画，你可以使用 JS/jQuery 或 CSS3