Javascript CSS覆盖来自角落

我试图在你用鼠标悬停的时候，在图像的顶部加入一个覆盖层。目前，我有它来只是从顶部，并减轻到底部。我试图实现的是，将重叠分成2个部分，从左上和右下，并加入中间。我知道仅仅用文字很难理解，所以我创建了一个图像

---

我以前见过这种做法，但不知道它叫什么，也不知道如何达到效果。非常感谢您的帮助这里是一个使用jquery的基本示例

注意，酷孩子会用css3做这件事

在本例中，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;
}

$（“.text”）.hover（函数（）{
$（.topleft”）.animate（{top:+0px}，500）；
$（“.bottomright”）.animate（{bottom:+0px”}，500）；
});
文本
.文本{
背景色：红色；
宽度：100px；
高度：100px；
保证金：自动；
溢出：隐藏；
位置：相对位置；
}
div div{
背景色：黑色；
高度：50px；
宽度：100px；
位置：绝对位置；
}
左上角{
顶部：-50px；
}
.右下角{
底部：-50px；
}

以下是我的尝试：

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

---

这可以在没有

.slide

元素的情况下实现，但需要更多的手动元素定位

到现在为止你都试过什么？你想用什么“技术”来实现它。CSS？什么脚本。。。？使用javascript会很好，但我只尝试过使用CSS的解决方案。我不知道如何从两个方向“分割”覆盖。我正在研究一个类似的解决方案，但显然不够快：注意，我也为覆盖文本添加了延迟转换，并且没有为幻灯片使用空div，但基本上是相同的技术。。。