来自角落的CSS叠加层

Question

我试图在鼠标悬停鼠标时在图像顶部添加叠加层。目前，我已经从顶端进入，并且趋于平静。我试图实现的是将叠加分成两部分，从左上角和右下角开始，然后加入中间。我知道这只是文字很难理解，所以我创建了一个图像。

我已经看到了这样做过，但我不知道它叫什么，或者如何达到的效果。帮助，将不胜感激

Answer 1

这里是我的刺吧：http://jsfiddle.net/

的基本想法是，你只是在做this，但与包装元素旋转。这个解决方案显然需要检查兼容性。

这可以在没有​​元素的情况下实现，但需要更多的手动定位元素。

Answer 2

这里是一个基本的例子，使用jQuery。

请注意，酷的孩子会用css3做到这一点。

http://jsbin.com/eyilog/1/edit

在这个例子中的div是绝对定位包含元素之外。溢出：隐藏;确保它们不可见。在悬停jquery动画他们的位置回到div的内部，覆盖div的内容。

为了使它对角线只使用透明图像。

$(".text").hover(function() { 
    $(".topleft").animate({top: "+0px"}, 500); 
    $(".bottomright").animate({bottom: "+0px"}, 500); 
}); 


    <div class="text"> 
    <div class="topleft"></div> 
    text 
    <div class="bottomright"></div> 

    </div> 


.text { 
    background-color:red; 
    width:100px; 
    height:100px; 
    margin:auto; 
    overflow:hidden; 
    position:relative; 

} 
div div { 
    background-color:black; 
    height:50px; 
    width:100px; 
    position:absolute; 
} 
.topleft { 
    top:-50px; 
} 
.bottomright { 
    bottom:-50px; 
}