Как разместить кнопки и текст на картинку?

Question

[Tutucu]

Ситуация такая: есть блок, в котором лежит картинка, на эту картинку должны быть помещены кнопки (следующая и предыдущая картинки), а по середине, между этими кнопками, должно быть расположено краткое описание картинки. Вот скриншот:

Пытался сделать позиционированием, но картинки генерируемые, их несколько и это слайдер, так что кнопки при малейшем изменении размера изображения начинают вылезать за его границы (у них же родитель - не картинка, а блок в которую она обёрнута).

Есть ещё идея поработать с background-image, и прописать его в html через атрибут "style" для родительского тега. Но как-то совесть мучает смешивать html и css в одном месте. Или всё таки так можно сделать? Не возникнут ли неприятности после этого?

Есть ещё какие-нибудь варианты решения проблемы?

Код:

<div class="banner__image">
                            <div href="#" class="banner__image-link">
                                <img src="image/spider.jpg" alt="" class="banner__img"/>
                                <a class="left-arrow">
                                
                                </a>
                                <a class="description-for-image">
                                    <div class="description-for-image__title">
                                        Great Lakehouse with Land
                                    </div>
                                    <div class="description-for-image__description">
                                        <span>from 21K</span> - in Texas, USA
                                    </div>
                                </a>
                                <a class="right-arrow">
                                    
                                </a>
                            </div>
                        </div>

.banner__image{
    width: 370px;
    float: left;
    box-sizing: border-box;
    padding: 0 15px 0 45px;
}

.banner__image-link{
    display: block;
    position: relative;
    overflow: hidden;
    height: auto;
}

.banner__img{
    min-width: 100%;
}

.left-arrow{
    display: block;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    width: 35px;
    height: 50px;
    bottom: 0;
    left: 0;
    
}

.right-arrow{
    display: block;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    width: 35px;
    height: 50px;
    bottom: 0;
    right: 0;
}

.description-for-image{
    display: block;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    min-height: 50px;
    width: 210px;
    bottom: 0;
    left: 50%;
    margin-left: -110px;
}

Comments

[Ankhena]

Код выложите

[Tutucu]

Выложил

Answer 1

[Виктор Новиков]

Как насчет такого варианта:
Картинку не трогать, а сделать вложенный контейнер, где будут храниться элементы управления, задаем ему
position: absolute и прочее, z-index например (в таком случае возможно придется указать картинке position: relative и z-index меньший, чем у контейнера с элементами управления), растянуть на высоту и ширну родительского контейнера.

Примерно так в разметке:

<div class="slider">
  <div class="slider-slide">
    <img src="..." alt="..."/>
    <div class="slide-controls">
      <!-- place controls here -->
    </div>
  </div>
</div>

Прошу прощения, если не совсем правильно понял задачу

Comments

[Tutucu]

Спасибо помогло!

[Виктор Новиков]

Рад был помочь :)