來自角落的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; 
}