rollOver上的CSS覆蓋

Question

我有一些DIV元素，我希望有一個rollOver效果，但我不知道從哪裏開始，或者如果這可以在CSS或jQuery中實現，甚至完全可以實現。

我附上圖片如下：

1. 正常狀態，只是一個形象

2. 在側翻我想覆蓋到從右到左的動畫。

3. 「over」狀態是一個三角形（90％不透明度），上面有一些文字。

有關從哪裏開始的建議？

Answer 1

當然，您可以：

HTML：

<div class="img"> 
    <img src="http://i.stack.imgur.com/TOVE8.jpg" /> 
    <div class="overlay"> 
     <span class="bg"></span> 
     <span class="txt">Name<br/>Surname</span> 
    </div> 
</div> 

CSS：

.img {overflow: hidden; height: 360px; width: 240px; position: relative;} 

.overlay {position: absolute; height: 100%; width: 100%; top: 0; left: 100%; 
    -webkit-transition: left 1s ease-out; 
    -moz-transition: left 1s ease-out; 
     -o-transition: left 1s ease-out; 
      transition: left 1s ease-out; 
} 

.img:hover .overlay {left: 0;} 

.bg {height: 600px; width: 600px; top: 50px; left: 90px;background: #000; position: absolute; display: block; 
    -webkit-transform: rotate(34deg); 
    -moz-transform: rotate(34deg); 
     -ms-transform: rotate(34deg); 
     -o-transform: rotate(34deg); 
      transform: rotate(34deg); 
} 

.txt {color: #fff; font-size: 30px; top: 250px; left: 100px; position: absolute;} 

DEMONSTRATION

Answer 2

我會嘗試這樣做只是CSS：

• 充分利用信息圖像的兩倍寬的藝術家和左50％TRANSPARANT。
• 將z-index更高的右側div下的信息圖像隱藏起來。

CSS：

img.info:hover { 
    margin-left: -100px; 
    transition: 1s; 
} 

Answer 3

看看http://jsfiddle.net/nfZK4/

<div id="container"> 
<div id="wrapper"> 
    <div id="image"></div><div id="overlay"></div> 
</div> 
</div> 

和

#container{ 
    width: 300px; 
    height: 500px; 
    overflow: hidden; 
} 
#wrapper{ 
    width: 600px; 
    height: 500px; 
    position: relative; 
} 
#image{ 
    background: lightgreen; 
    width: 300px; 
    height: 500px; 
    display:inline-block; 
} 
#overlay{ 
    width: 300px; 
    height: 500px; 
    background-image: url('http://i.imgur.com/JgBlqTk.png'); 
    position: absolute; 
    top: 0; 
    left: 300px; 
    transition: all 1s; 
} 
#container:hover #overlay{ 
    left:0; 
} 

最上面的DIV隱藏的視線溢出三角：隱藏。 當光標懸停在頂部的div上時，三角形向左移動：0並轉換爲動畫。