Наложение CSS на rollOver

Question

У меня есть некоторые элементы DIV, для которых я хотел бы иметь эффект rollOver, но я не знаю, с чего начать, или если это может быть достигнуто в CSS или с jQuery или даже вообще.

Я приложил изображение ниже:

1. Нормальное состояние только изображение

2. На RollOver Я хочу оверлей анимировать в справа налево.

3. Состояние «над» - это треугольник (непрозрачность 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% транспарант.
• Скрыть информационное изображение под div справа с высшим z-индексом.

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, треугольник перемещается внутрь с левым: 0 и переход для его анимации.