user1656528 user1656528 - 17 days ago 5
CSS Question

How can I overlay text on multiple images with different sizes? css

I have a client who would like to have a sold text on top of all of her pictures that were sold on the bottom left corner of each image. I have the implementation done but the problem is that some images are different in size. Is there a "one class fits all" type of css I can use to position the text correctly regardless of the image's size?

The Code:



.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

I positioned the red Sold banner at bottom left and also sized the image at 100% so it will always fill its column/responsive container:

.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>