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