在Bootstrap中悬停显示文本

Question

我试图在悬停在行内的图像和col-md-3上添加文本。我希望它在图像中心显示文本时更改不透明度以设置理想。

我有不透明度，但是我在数据悬停类中苦苦挣扎，我不知道在HTML和CSS中放置我想要的文本

我在这里包含了一个小提琴，其中包含了迄今为止我完成的所有工作：https://jsfiddle.net/a8u05mw1/

HTML：

<div class="container-fluid">
  <div id="wrapper">
    <div class="row">
      <div class="col-md-3">
        <img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg>
      </div>

      <div class="col-md-3">
        <img class="img-responsive" src=https://www.roys.co.uk/media/wysiwyg/FASHION/MENSWEAR-AW16-JOULES-COAT.jpg>
      </div>

      <div class="col-md-3">
        <img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/b1/5e/38/b15e38cd4864c85a52897d906a88710c.jpg>
      </div>

      <div class="col-md-3">
        <img class="img-responsive" src=https://static1.squarespace.com/static/56b6a4bd07eaa0d2d0eddb7f/58678682bebafb6e8b0a4e2a/5867868b893fc0dff9edd97d/1483179664063/Andrew+Belliot-011.jpg?format=500w>
      </div>
    </div>
  </div
</div>

CSS：

#wrapper img {
width: 100%;
transition-duration: 0.8s;
}

.col-md-3 {
padding: 0;
}

#wrapper img:hover {
opacity: 0.8;
transition-duration: 0.8s;
}