javascript - CSS覆盖来自角落

Question

当您用鼠标悬停时，我试图在图像顶部引入一个叠加层。目前我只是从顶部开始，然后逐渐下降到底部。不过，我想要实现的是将覆盖分成两部分，从左上角和右下角开始，并在中间加入。我知道这很难用文字来理解，所以我创建了一个图像。

我以前见过这样做，但不确定它叫什么，或者如何达到效果。帮助将不胜感激

Answer 1

这是我的尝试：http: //jsfiddle.net/

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

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

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;
}