How to place buttons and text on the picture?

The situation is this: there is a block, which is a picture this picture should be placed buttons (next and previous images), and in the middle between these buttons should be located brief description of the picture. Here is a screenshot:97d5234c5d774ec2b244dcb7db8077b0.png

Tried to do the positioning, but the images generated by them and it's a slider, so the buttons at the slightest changing the image size starts to exceed its boundaries (they have the same parent - not a picture and the block in which it is wrapped).

There is still the idea to work with background-image, and set it to html using the "style" attribute to the parent tag. But somehow conscience torments mixing html and css in one place. Or all the same it can be done? Will not have any trouble after that?

Are there any solutions to the problem?

Code:

<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;
}
July 4th 19 at 22:51
1 answer
July 4th 19 at 22:53
Solution
How about this:
The picture not to touch, and to make a nested container to hold the controls, ask him
position: absolute and so the z-index for example (in this case, you may have to specify the image position: relative and z-index less than that of the container with controls), stretch to the height and siRNA parent container.

Something like this in the markup:
<div class="slider">
 <div class="slider-slide">
 <img src="..." alt="...">
 <div class="slide-controls">
 <!-- place controls here -->
</div>
</div>
</div>


I apologize, if not quite correctly understood the task
Thank you! - abagail.Reynolds commented on July 4th 19 at 22:56
Glad to help :) - gonzalo.Howe commented on July 4th 19 at 22:59

Find more questions by tags CSSHTML