Как переместить рубрику на превьюшку новости?

Question

[Вачаган Даниелян]

Как переместить серый фон с названием рубрики поверх картинки превью топика ?

1. Либо сверху на изображении
2. Либо снизу на изображении

Сайт: GeekNinja.ru
Фото для примера

Comments

[Евгений Петров]

Взять и в шаблоне перенести в нужное место.

[Вачаган Даниелян]

Евгений Петров: Я это и сам знаю :D
Но я не знаю, какой код именно брать.
Люди шарящие в css могут мне подсказать, как кусок кода скопировать и может даже куда вставить.

Answer 1

[Денис Инешин]

Примерно так: jsfiddle.net/IonDen/p47Lkssj

.pic {
    position: relative;
    float: left;
    width: 250px;
    height: 150px;
    margin: 0 10px 10px 0;
    background-color: #ccc;
    background-position: 50% 50%;
    background-size: cover;
}

.pic-text {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    padding: 5px;
    width: 100%;
    box-sizing: border-box;
    color: #fff;
}
.pic-text.top {
    top: 0;
}
.pic-text.bottom {
    bottom: 0;
}

Comments

[Вачаган Даниелян]

Не совсем так, у вас оно занимает все место в ширину, а мне надо также, как у меня, но в верхней или нижней позиции по отношению к превьюшке.

По сути мне нужно просто понять, куда перенести это и что именно (какой код, отвечающий за отображение рубрики)

[Денис Инешин]

Вачаган Даниелян: уберите width: 100% и всё будет.

[Денис Инешин]

Вачаган Даниелян: jsfiddle.net/IonDen/p47Lkssj/1

[Вачаган Даниелян]

Денис Инешин: ок и куда это вставлять ?

[Денис Инешин]

Вачаган Даниелян: то что я вам написал, это не готовое решение, а пример того, как это делается. Дальше вы уже сами должны сообразить, ваш же сайт.

Answer 2

[Дмитрий Шинкарь]

Мне лень писать код, но я себе это вижу как картинка в диве, в этом же диве еще один див, в нем кнопка (или сразу кнопка). У кнопки (или дива в котором кнопка) z-index выше... Готово =)