Bootstrap 3.在特定位置使用框+文本（也是响应）的响应图像

Question

我一直在研究如何做，但我不知道。

我想在我的导航栏后面显示一张图片，以网页为中心并重新设置窗口的大小。 （我已经实现了这一点）

问题是我想在里面加入一个带有文字的半透明盒子。我希望这个框（带有文本）以与图片相同的方式响应，并且也位于图像内的相同位置（例如，从图片底部30px和图片左边30px）。

#main-picture{
	position:relative;
}

#main-picture #off{
	background-color: #FFFFFF;
	position: absolute;
	z-index: 1;
	height: 200px;
	width: 200px;
	top: 50%;
	left: 20%;
	right: 40%;
	opacity: 0.5;
}

 <div class="container-fluid" id="main-picture">
                      <img src="http://38.media.tumblr.com/7d2c68e9ae46f5dfc10593129af90dab/tumblr_inline_mzze4zlPLM1re0xjv.jpg" alt="img" class="img-responsive center-block img-rounded">
                        <div class="col-md-4 img-rounded text-center" id="off">
                            <h3>Grand openning</h3>
                            <strong><h2>30% off</h2></strong>
                            <p>in all our products</p>
                        </div>
                    	
                        
          </div>

我真的不知道怎么做。我一直在尝试不同的组合，但我没有达到我想要的效果。

我想要的效果类似于本网站的“浏览按钮”https://www.danielladraper.com/

非常感谢你的帮助。