Как создать цвет фона наведения 100% на реагирующие изображения

Question

Я создал некоторые отзывчивые изображения, но хотел бы, чтобы состояние зависания показывало имя пользователя.

Мне удалось создать состояние зависания, используя Css и JQuery, но, к сожалению, фон наведения не остается на 100% при изменении ширины экрана.

Может ли кто-нибудь объяснить лучший способ достичь 100% -ного фона ширины? На моем фоновом изображении есть дополнение, поэтому я не могу сохранить черный фон на изображении.

Вот скрипка, чтобы объяснить, что я имею в виду.

Надеюсь, это имеет смысл.

http://jsfiddle.net/isherwood/x59tB/15/

.show-username{ 
    position: absolute; 
    background-color: rgba(0, 0, 0, 0.5); 
    color: white; 
    font-weight: bold; 
    bottom: 0px; 
    padding: 5px; 
    font-size: 11px; 
    width: inherit; 
    display: none; 
} 

Answer 1

у вас есть две проблемы:

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

#upload-container ul li span { 
    font-size: 16px; 
    line-height: 22px; 
    display: block; 
    width: 82%; // <---- Move this style 
    position: absolute; 
    bottom: 13px; 
} 

Вторые добавить правые и левые декларации для .show-имя пользователь правил CSS:

.show-username{ 
    position: absolute; 
    background-color: rgba(0, 0, 0, 0.5); 
    color: white; 
    font-weight: bold; 
    bottom: 0px; 
    padding: 5px; 
    font-size: 11px; 
    width: inherit; 
    display: none; 
    right: 10px; 
    left: 10px; 
}