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

时间:2014-03-02 04:28:43

标签: jquery css3

当您将鼠标悬停在图片上方时,我一直在努力实现与本网站的投资组合部分相似的效果:http://www.richdean.co.uk/。老实说,我一直想弄清楚他是怎么做到的,这可能很简单,任何帮助都会受到赞赏。

谢谢你, 英里

2 个答案:

答案 0 :(得分:0)

你可以做的是使用border-radius从div中制作一个圆圈:

.circle {
    border-radius: 50%;
    width: 200px;
    height: 200px; 
}

然后将overflow:hidden添加到圈子中。创建一个圆圈的div,并将其top偏移设置为-100%,使其不在视线范围内且位于圆圈上方。使用jquery' .animate()将顶部方向移动到0%,使其填充圆圈。您还可以使用css transitions使用:hover向下移动内部div。

答案 1 :(得分:0)

您可以这样做: 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;
}

基本思想是让一个relative positioned圆形元素,其内部absolute pos.元素最初位于某个-top值。

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

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