答案1：无引导
jsfiddle answer 1

<div class="container-fluid">
  <div id="wrapper">
      <div class="row">
    
          <div class="col-md-3">
        <div class="img-container">
          <img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg style="width:100%;">
          <div class="img-hover-text centered">Your text here</div>
         </div>
      </div>
      
      <div class="col-md-3">
        <div class="img-container">
          <img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/b1/5e/38/b15e38cd4864c85a52897d906a88710c.jpg>
          <div class="img-hover-text centered">Your text here</div>
        </div>
      </div>
      
      <div class="col-md-3">
        <div class="img-container">
          <img class="img-responsive" src=https://static1.squarespace.com/static/56b6a4bd07eaa0d2d0eddb7f/58678682bebafb6e8b0a4e2a/5867868b893fc0dff9edd97d/1483179664063/Andrew+Belliot-011.jpg?format=500w>
          <div class="img-hover-text centered">Your text here</div>
        </div>
      </div>

    </div>
  </div>
</div>

注意：我删除了不再可用的图像。

.container {
  position: relative;
  text-align: center;
  color: white;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* original example from question */
.img-responsive:hover + .img-hover-text {
  display: block;
}

.img-hover-text:hover { 
  /* needed for the text to stay visible
  when the cursor it just over it.
  */
  display: block;
}

.img-hover-text {
  display: none;
  color: white;
  font-size: 20px;
}

答案2：带 Bootstrap

jsfiddle answer 2
我根据您的代码创建了一个新示例，但使用的是Booststrap/Popper.js中的tooltips。我使用了bootstrap启动器模板来快速启动Boostrap的使用。
一个一个二个一个一个一个三个一个一个一个一个一个四个一个

解释答案1：

你想要两样东西：
1.首先，将文本居中放置在图像上。
1.然后，在文本上应用悬停效果，使其仅在光标悬停在图像上时显示。
你可以得到一个很酷的教程，关于如何在图像上居中文本here | w3school。

<div class="container">
  <img src="https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg" alt="Snow" style="width:100%;">
  <div class="centered">Centered</div>
</div>

.container {
  position: relative;
  text-align: center;
  color: white;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这将为您提供以下图片：

警告：不要像我一样。不要在<p>上浪费时间。直接使用<div>作为文本。

<div class="container">
  <img src="https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg" alt="Snow" style="width:100%;">
  <p class="centered">Not Centered</p>
</div>

否则，您将看到以下内容：

好了，现在我们有了居中的文本。是时候让它消失了。让我们回到你的代码并修改它。

<div class="col-md-3">
  <div class="img-container">
    <img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg style="width:100%;">
  <div class="img-hover-text centered">Your text here</div>
</div>

.img-responsive:hover + .img-hover-text {
  display: block;
}

.img-hover-text {
  display: none;
  color: white;
  font-size: 20px;
}

然而，如果我们停在那里，就会出问题。当我们将光标悬停在文本区域的正上方时，文本会消失！为了纠正这个问题，添加最后一条css规则：

/* needed for the text to stay visible
  when the cursor it just over it. */
.img-hover-text:hover { 
  display: block;
}

解释答案2

我们的想法是不做我们手工制作的东西，而是使用一个库：也就是Popper.js，幸运的是Boostrap使用了它。我们在我们想要悬停时显示工具提示的元素中包含了data-toggle="tooltip" data-placement="auto" title="This is a Tooltip"的工具提示。这里是<img>。
为了使is工作，我们还需要导入必要的库。不要忘记在结束<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>之前，关闭</body>标志。
成交！

长话短说，为那些寻找一个Boostrap答案。
在所需的标志中添加 * 工具提示 *。

<img src=... data-toggle="tooltip" data-placement="auto" title="This is a Tooltip">

个字符
不要忘记添加Popper.js，这是工具提示所需的。

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>