html - Bootstrap 3 Alignment -
i've made thumbnail . please image provided.
![enter image description here][1]
i want buttons n h u should overlap image. how do that? plus there should small black translucent strip on image 20px bottom.
<div class="thumbnail"> <div class="caption"> <p class="product_title">{{deal.title}}</p> <p class="product_price">₹ {{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%; }
if reading code correctly, there couple of things need do:
<div class="thumbnail"> <div class="caption"> <p class="product_title">{{deal.title}}</p> <p class="product_price">₹ {{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; }
Comments
Post a Comment