How to make an item responsive in twitter bootstrap

How to make an item responsive in twitter bootstrap

I have a bootstrap theme i designed my self, its quite resonsive, adjusts
immediately screen size shrinks, but when i added some javascript
functionality to an image making it have an overlay on hover, with some
little css, the responsiveness of the image got distorted, it never
shrinks, and i want the overlay to remain, please i'm pleading if anyone
could help in making it retain its responsiveness .... This is html code
snippet below.
<div class="container marketing" style="padding-top: 20px;">
<div class="row">
<div class="span8">
<span class="label label-info">EXCLUSIVE</span>
<img id="d1"
src="img-data/underage-marriage/nigeria-underage-marriage.jpg">
<div class="contenthover" style="margin-top:10%;">
<div class="row-fluid text-center" style="border-bottom:1px
#CCC dashed; padding-bottom:3%;">
<div class="span8" style="border-right:1px #CCC dashed;
padding-right: 2%;">
<h1 class="pull-right" style="border-bottom:1px #CCC
dashed;"><img
src="img/brainstorm.png"><b><i>discussion</i></b></h1>
<h1><small class="pull-right">Keep your language
clean.</small></h1>
</div>
<div class="span4" style="padding-top:3%;">
<button type="button" class="btn btn-large btn-danger
pull-left" data-loading-text="Loading...">View
Article</button>
</div>
</div>
</div>
</div>
<div class="span4"></div>
</div>
</div>