Bootstrap 3 Alignment

Question

I've made a thumbnail . Please look into the image provided.

![enter image description here][1]

I want that the buttons NHU should overlap the image. How do I do that? Plus there should be a small black translucent strip over the image 20px from the bottom.

<div class="thumbnail">
    <div class="caption">
        <p class="product_title">{{deal.title}}</p>
        <p class="product_price">&#8377  {{deal.buyout_price}}</p>
    </div>
    <div class="pull-left" style="padding-top:20px;">
        <img src="{% static "images/p.png" %}" alt="New Product"><br>
        <img src="{% static "images/p.png" %}" alt="New Product"><br>
        <img src="{% static "images/p.png" %}" alt="New Product">
    </div>
    <img src="media/auction/Screenshot_from_2015-05-18_235741.png" alt="..." class="thumbnail-img deals_padding">
</div>

CSS

.deals_padding{
  padding-left: 0px;
  padding-top: -20px;
  width: 80%;
}

Answer 1

If I am reading your code correctly, there are a couple of things you need to do:

<div class="thumbnail">
    <div class="caption">
        <p class="product_title">{{deal.title}}</p>
        <p class="product_price">&#8377  {{deal.buyout_price}}</p>
    </div>
    <div class="pull-left" style="padding-top:20px;">
        <img src="{% static "images/np.png" %}" alt="New Product"><br>
        <img src="{% static "images/hp.png" %}" alt="New Product"><br>
        <img src="{% static "images/up.png" %}" alt="New Product">
    </div>
    <img src="media/auction/Screenshot_from_2015-05-18_235741.png" alt="..." class="thumbnail-img deals_padding">
</div>


.thumbnail{
   position: relative;
}

.thumbnail .pull-left{ 
   position: absolute;
   left: 0px;
   top: 0px;
   bottom: 0px;
}

.caption{
  position: absolute;
  bottom: 0px;
  height: 20px;
  left: 0px;
  right: 0px;
}