Перекрытие img полностью с другим div

Question

Я пытаюсь добиться этого эффекта, когда фотография получает повторяющийся узор, наложенный на всю фотографию, когда пользователь наводил курсор на фотографию.

Проблема: Я, похоже, не могу сделать наложение div полностью наложением фотографии. Как это сделать?

JSfiddle: http://jsfiddle.net/KDyKH/2/

Edit: Обновлено скрипку

CSS

#container { 
    position: relative; 
    padding: 10px; 
    width: 1000px; 
    height: 500px; 
    background: blue; 
} 

.photo_box { 
    padding: 8px 10px 11px 10px; 
    background: #fff; 
    -webkit-box-shadow: 1px 1px 6px rgba(50, 50, 50, 0.25); 
    -moz-box-shadow: 1px 1px 6px rgba(50, 50, 50, 0.25); 
    box-shadow:   1px 1px 6px rgba(50, 50, 50, 0.25); 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    display: inline-block; 
    position: relative; 
} 

.photo { 
    position: absolute; 
    z-index: 0; 
    margin-bottom: 13px; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
} 

.photo_tint { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    z-index: 100; 
    background: red; 
    -moz-opacity: 0.70; 
    opacity: 0.70; 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70); 
}​ 

HTML

<div id="container"> 
    <div class="photo_box"> 
     <img src='http://www.kurzweilai.net/images/Google-logo.jpg' class="photo"> 
      <div class="photo_tint"></div> 
     </img> 
    </div> 
</div>​ 

Answer 1

В дополнение к добавлению left и top свойства .photo_tint, вам также необходимо сделать .photo_box относительно позиционируемых (это было не раньше, чем вы редактировали ваш вопрос).

.photo_box { 
    position: relative; 
} 

.photo_tint { 
    left:0; 
    right:0; 
}​ 

http://jsfiddle.net/KDyKH/5/

левый/верх абсолютное положение в/справа/снизу атрибуты отрабатывают последний элемент выше в иерархии с положением, установленным в относительной или абсолютной. Если ни один из родительских элементов не имеет позиции, заданной относительной/абсолютной, используется тело. В вашем случае наиболее близким относительно расположенным элементом был #container, поэтому, когда left и top были установлены на .photo_tint, он использовал происхождение #container, а не .photo_box, при необходимости для достижения желаемого эффекта.

Кроме того, если элемент установлен в положение: абсолютный, а свойства слева/сверху/справа/справа не установлены, элемент будет вести себя как абсолютный (see this question).

Answer 2

.photo_tint { 
    position: absolute; 
    z-index: 100; 
    background: red; 
    top:0; left:0; 
    width:100%; height:100%; 
}​ 

???

http://jsfiddle.net/tFbbM/1/

Answer 3

г-индекс: -1 на изображении или Z-индексе: 2 на DIV

#container { 
    position: relative; 
    width: 500px; 
    height: 500px; 
    background: blue; 
} 

.photo { 
    position: relative; 
    width: 300px; 
    height: 100px; 
    background: green; 
} 

.photo_tint { 
    position: absolute; 
    z-index: 1; 
    background: red; 
    width: 300px; 
    height: 100px; 
    top:0px; 
}​ 

Answer 4

Просто поместите photo_tint DIV с помощью top и left. http://jsfiddle.net/OhMrBigshot/gEdJu/