Opaque image over Transparent Background - html

Question

I want to make image opaque over 70% opaque background. I am working on tboxsolutionz.com/dev12345
When Portfolio item is clicked a div is loaded (Code for that div is given below)
<div class="portfolio-modal modal fade transparent-background in" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="false" style="display: block;"><div class="modal-backdrop fade in" style="height: 846px;"></div>
<div class="modal-content">
<!-- <div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl"> </div>
</div>
</div>-->
<div class="container containerport">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<!-- Project Details Go Here -->
<h2>Monster Mischief</h2>
<!--<p class="item-intro">Monster is up to a bit of mischief in the new endless runner game built for the pros & casual game players. Monster Mischief is insanely easy to pick up and play with a simple tap to control system. Simply navigate Monster through the obstacles while picking up sweet upgrades along the way to pimp out your character. Available now for your iPhone, iPod, & iPad.</p>-->
<img class="img-responsive img-centered" src="img/portfolio/image11.jpg" alt="">
<p class="zoom-text">Monster is up to a bit of mischief in the new endless runner game built for the pros & casual game players. Monster Mischief is insanely easy to pick up and play with a simple tap to control system. Simply navigate Monster through the obstacles while picking up sweet upgrades along the way to pimp out your character. Available now for your iPhone, iPod, & iPad.</p>
<ul class="list-inline">
<!--<li><strong>Client</strong>: John Doe</li>
<li><strong>Category</strong>: Web Design</li>-->
<li><img src="img/portfolio/App_Store.png" width="120" style="float:right;margin-right: 10px;" align="bottom">
</li>
</ul>
<button type="button" class="btn btn-primary centered" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
I have tried several aspects from css and html including z-index, making the background of the image white but nothing is working

Answer 1

try to give opacity:0.1;to the image or try overlay div with same opacity.

Answer 2

i did it by following styling
.fade.in
{background-color:rgba(181,181,181,0.7)}
.modal-content
{ z-index:15;
background-color: white
}
but this made the background of content white and rest area transparent