title: Display Text Over Hover in Bootstrap
body: <p>I'm trying to add text on hover over an image inside a row and col-md-3. I want it to change opacity to set ideal while displaying text in centered inside the image. </p>
  
  <p>I have the opacity hover down but I'm struggling with the data-hover class and I have no clue where to place the text I want inside HTML and CSS</p>
  
  <p>I've included a fiddle here with all the work I have accomplished thus far: <a href="https://jsfiddle.net/a8u05mw1/" rel="nofollow noreferrer">https://jsfiddle.net/a8u05mw1/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;div id="wrapper"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-3"&gt;
          &lt;img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/e6/61/fe/e661fe4b71debff151e6eb3fcd670bbe.jpg&gt;
        &lt;/div&gt;
  
        &lt;div class="col-md-3"&gt;
          &lt;img class="img-responsive" src=https://www.roys.co.uk/media/wysiwyg/FASHION/MENSWEAR-AW16-JOULES-COAT.jpg&gt;
        &lt;/div&gt;
  
        &lt;div class="col-md-3"&gt;
          &lt;img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/b1/5e/38/b15e38cd4864c85a52897d906a88710c.jpg&gt;
        &lt;/div&gt;
  
        &lt;div class="col-md-3"&gt;
          &lt;img class="img-responsive" src=https://static1.squarespace.com/static/56b6a4bd07eaa0d2d0eddb7f/58678682bebafb6e8b0a4e2a/5867868b893fc0dff9edd97d/1483179664063/Andrew+Belliot-011.jpg?format=500w&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#wrapper img {
  width: 100%;
  transition-duration: 0.8s;
  }
  
  .col-md-3 {
  padding: 0;
  }
  
  #wrapper img:hover {
  opacity: 0.8;
  transition-duration: 0.8s;
  }
  </code></pre>