Сделать абсолютный позиционированный вложенный ребенок шириной контейнера

Я по существу отображаю изображение баннера на странице. В основе этого изображения лежит оверлей (абс. Поз. Div) с полупрозрачным фоновым изображением, чтобы сделать эффект «увидеть». Все позиционируется правильно и работает нормально, за исключением того, что наложение шириной 100% расширяется за пределами моего контейнера div. Я попытался настроить переполнение на скрытый контейнер контейнера, но это, похоже, не работает. У моего родительского контейнера также есть позиция. Это реагирует так, чтобы наложение с необходимостью сокращаться и расширяться до ширины изображения. Вот мой код:Сделать абсолютный позиционированный вложенный ребенок шириной контейнера

<div class="hero-img-wrap"> 
     <img src="images/banner_image.jpg" alt=""> 
     <div class="trans-overlay"></div> 
</div>

Мой CSS:

.hero-img-wrap { 
    position: relative; 
    margin-top: 35px; 
    padding-left: 15px; 
    padding-right: 15px; 
} 

.hero-img-wrap img { 
    width: 100%; 
    height: auto; 
} 

.hero-img-wrap .trans-overlay { 
    position: absolute; 
    bottom: 0; 
    z-index: 9; 
    height: 19px; 
    background-image: url('../images/semi_transparent_white.png'); 
    width: 100%; 
}

я мог бы провернуть это с JQuery, но я хотел бы избежать этого. Любая помощь будет принята с благодарностью. Для чего это может стоить - этот код находится в столбце Bootstrap 3.

Спасибо!

источник

2015-01-06 ScoobaSteve