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

Question

У меня есть клиент, который хотел бы иметь проданный текст поверх всех своих фотографий, которые были проданы в нижнем левом углу каждого изображения. У меня есть реализация, но проблема в том, что некоторые изображения отличаются по размеру. Есть ли тип «один класс подходит ко всем», который я могу использовать для правильного размещения текста независимо от размера изображения?

Кодекс:

.sold-overlay { 
 
    position: absolute; 
 
    top: 80%; 
 
    left: 59%; 
 
    width: 25%; 
 
    border: 1px solid #e60000; 
 
    color: white; 
 
    font-size: 50%; 
 
    background-color: red; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-lg-8 col-lg-offset-2"> 
 
     <div class="modal-body"> 
 
     <h2>I Am Travon Martin</h2>       
 
     <img class="img-responsive img-centered" src="img/portfolio/sold/img-6847.jpg" alt=""> 
 
     <h2 class="sold-overlay">Sold</h2> 
 
     <p>I'm sorry, this artwork has been sold to a happy customer.</p>       
 
     <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

я расположил красный Продан баннер на левом нижнем углу, а также размером, изображение на 100%, так что он всегда будет заполнить свою колонку/отзывчивый контейнер:

.sold-overlay { 
 
position: absolute; 
 
bottom: 0; 
 
left: 0; 
 
width: 25%; 
 
border: 1px solid #e60000; 
 
color: white; 
 
font-size: 50%; 
 
background-color: red; 
 
} 
 

 
.relative { 
 
position: relative; 
 
} 
 

 
.relative img { 
 
    display: block; 
 
    width: 100%; 
 
    }

<div class="container"> 
 
       <div class="row"> 
 
        <div class="col-lg-8 col-lg-offset-2"> 
 
         <div class="modal-body"> 
 
          <h2>I Am Travon Martin</h2>      
 
          <div class="relative"> 
 
          <img class="img-responsive img-centered" src="http://placehold.it/200x100" alt=""> 
 
          <div class="sold-overlay"><h2>Sold</h2></div> 
 
          </div> 
 
          
 
          <p>I'm sorry, this artwork has been sold to a happy customer.</p>       
 
          
 
         </div> 
 
         <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button> 
 
        </div> 
 
       </div> 
 
      </div>