html - Displaying a button on top of thumbnail image -

html - Displaying a button on top of thumbnail image -

i'm trying place button on top of thumbnail image button added after image, in caption area. here code:

<div class="thumbnail"> <img class="img-responsive"alt="300x200" src="network_sec.jpg"> <button class="btn btn-default btn-warning pull-right"><span class="glyphicon glyphicon-user"></span> 10</button> <div class="caption"> <h3 align="center">network security</h3> <br> <p> <button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-wrench"></span> manage</button> <button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-eye-open"></span> preview</button> <button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-pencil"></span> edit info</button> </p> </div> </div>

i'm trying align button @ bottom right part of image. suggestions on how can accomplish desired result?

i set image button in new div, utilize positioning relative , absolute this.

html

<div class="thumbnail"> <div id="thumb"> <img class="img-responsive"alt="300x200" src="network_sec.jpg"> <button class="btn btn-default btn-warning pull-right"><span class="glyphicon glyphicon-user"></span> 10</button> </div> <div class="caption"> <h3 align="center">network security</h3> <br> <p> <button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-wrench"></span> manage</button> <button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-eye-open"></span> preview</button> <button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-pencil"></span> edit info</button> </p> </div> </div>

css

#thumb { position: relative; width: 300px; height: 200px; } #thumb img { z-index: 1; position: absolute; width: 300px; height:200px; top: 0; left: 0; } #thumb button { z-index: 5; position: absolute; bottom: 0; right: 0; }

is had in mind?

html css twitter-bootstrap-3