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">&#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%; } 

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">&#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; } 

Comments

Popular posts from this blog

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

twig - Using Twigbridge in a Laravel 5.1 Package -

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -