jquery - rollOver 上的 CSS 叠加

Question

我有一些 DIV 元素，我想对其产生滚动效果，但我不知道从哪里开始，或者这是否可以在 CSS 或 jQuery 中实现，甚至根本不知道。

我在下面附上了一张图片:

1. 正常状态只是一张图片

2. 在 rollOver 上，我希望叠加层从右到左动画。

3. “结束”状态是一个三 Angular 形(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