Отзывчивый div над изображением

Question

Как я могу сделать отзывчивый div поверх адаптивного изображения?

Я разработал этот код, однако div не полностью сопровождает изображение.

Может ли кто-нибудь мне помочь?

codePen

HTML

<div class="container-fluid first">
      <div class="row tab-pane Galeria">
        <div class="col-sm-2">
          <a class="d-block mb-4 h-100">
            <img class="Images img-fluid" src="https://source.unsplash.com/aob0ukAYfuI/400x300" alt="">
            <div class="ImageText"> Name</div>
          </a>
        </div>
        <div class="col-sm-2">
          <a class="d-block mb-4 h-100">
            <img class="Images img-fluid" src="https://source.unsplash.com/aob0ukAYfuI/400x300" alt="">
            <div class="ImageText"> Name</div>         
          </a>
        </div>
        <div class="col-sm-2">
          <a class="d-block mb-4 h-100">
            <img class="Images img-fluid" src="https://source.unsplash.com/EUfxH-pze7s/400x300" alt="">
            <div class="ImageText"> Name</div>
          </a>
        </div>
    </div>

Answer 1

Можете ли вы проверить этот код, мы внесли небольшие изменения в html и css, мы также добавили несколько классов начальной загрузки для лучшего обзора элементов. Надеюсь, это сработает для вас.

.Galeria{
margin-top: 20px;
}
.image-item{
margin-bottom:20px;
}
.Images{
border-radius: .25rem;
width: 100%;
height: auto;
border-radius: 8px;
cursor: pointer;
}

.image-block{
position:relative;
}
.ImageText{
width: calc(100% - 20px);
height: auto;
background: #F0EDEB 0% 0% no-repeat padding-box;
border-radius: 8px 8px 0px 0px;
backdrop-filter: blur(25px);
-webkit-backdrop-filter: blur(50px);
position: absolute;
bottom: 0;
left: 10px;
padding: 10px;
box-sizing: border-box;
font-size: 16px;
font-family: "Segoe UI";
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid first">
<div class="row tab-pane Galeria">
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="image-item">
<a class="d-block image-block h-100">
<img class="Images img-fluid" src="https://source.unsplash.com/aob0ukAYfuI/400x300" alt="">
<div class="ImageText"> Name</div>
</a>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="image-item">
<a class="d-block image-block h-100">
<img class="Images img-fluid" src="https://source.unsplash.com/aob0ukAYfuI/400x300" alt="">
<div class="ImageText"> Name</div> 
</a>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="image-item">
<a class="d-block image-block h-100">
<img class="Images img-fluid" src="https://source.unsplash.com/EUfxH-pze7s/400x300" alt="">
<div class="ImageText"> Name</div>
</a>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="image-item">
<a class="d-block image-block h-100">
<img class="Images img-fluid" src="https://source.unsplash.com/M185_qYH8vg/400x300" alt="">
<div class="ImageText"> Name</div>
</a>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="image-item">
<a class="d-block image-block h-100">
<img class="Images img-fluid" src="https://source.unsplash.com/sesveuG_rNo/400x300" alt="">
<div class="ImageText"> Name</div>
</a>
</div>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
<div class="image-item">
<a class="d-block image-block h-100">
<img class="Images img-fluid" src="https://source.unsplash.com/AvhMzHwiE_0/400x300" alt="">
<div class="ImageText"> Name</div>
</a>
</div>
</div>
</div>
</div>

Answer 2

Возможно, вы можете заменить тег img на div, для которого в качестве фона установлено изображение.

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

<div class="Images" style="background: url(https://source.unsplash.com/aob0ukAYfuI/400x300)">
   <div class="ImageText"> Name</div>
</div>

.Images {
   position: relative;
   background-size: cover !important;
   width: 90%; 
   height: 100%; 
   border-radius: 10px;
}
.ImageText {
   ...
   width: calc(100% - 46px) !important;
}

Answer 3

Вы можете использовать ниже CSS:

.Galeria a {
 position: relative;
}

.ImageText {
 left: 0;
 width: 100%;
 box-sizing: border-box;
}