title: Display Text on Image Hover
body: <p>I'm trying to add text to an image when hovered. Maybe I need a second eye of what I'm doing wrong?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .container {
    margin: 0 auto;
    max-width: 947px;
  }
  [class*=bit-] {
    float: left;
    padding: .3em;
    position: relative;
  }
  button {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: #fff;
    border:none;
    display: none;
    cursor: pointer;
    background-color: black;
    height: 30px;
    width: 30%;
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
  }
  
  .static {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    color: #fff;
    border:none;
    display: block;
    cursor: pointer;
    background-color: black;
    height: 30px;
    width: 30%;
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
  }
  }
   
   p.important {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size:12px;
    color:#fff;
    display: none;
    width: 50%;
    left: 50%;
    top: 80%;
    position: absolute;
    transform: translate(-50%, -50%);
    text-align:center;
   }
   
  
  .imgHover {
   max-width: 100%;
      max-height: 100%;
      transition: .2s all;
  }
  .imgHover img:hover {
   -webkit-filter: brightness(50%);
  }
  .imgHover:hover button {
    display: initial;
  }
  
  .imgHover:hover .important {
   display: initial;
  }
  /* Grids */
  
  .box {
    background: #00aabe;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    padding: 20px 0;
  }
  .box-2 {
    background: #00aabe;
  }
  .bit-1 {
    width: 100%;
  }
  .bit-2 {
    width: 50%;
  }
  .bit-3 {
    width: 33.33333%;
  }
  .bit-4 {
    width: 25%;
  }
  .bit-5 {
    width: 20%;
  }
  .bit-6 {
    width: 16.66667%;
  }
  .bit-7 {
    width: 14.28571%;
  }
  .bit-8 {
    width: 12.5%;
  }
  .bit-9 {
    width: 11.11111%;
  }
  .bit-10 {
    width: 10%;
  }
  .bit-11 {
    width: 9.09091%;
  }
  .bit-12 {
    width: 8.33333%;
  }
  .bit-25 {
    width: 25%;
  }
  .bit-40 {
    width: 40%;
  }
  .bit-60 {
    width: 60%;
  }
  .bit-75 {
    width: 75%;
  }
  .bit-35 {
    width: 35%;
  }
  .bit-65 {
    width: 65%;
  }
  /* Responsive Goodness */
  
  /* Defaults above are set Desktop resolution or higher */
  
  /* Laptop */
  
  @media (min-width: 50em) and (max-width: 68.75em) {
    .bit-7,
    .bit-35,
    .bit-65 {
      width: 100%;
    }
    .bit-10,
    .bit-12,
    .bit-4,
    .bit-8 {
      width: 50%;
    }
  }
  /* Tablet */
  
  @media (min-width: 30em) and (max-width: 50em) {
    .bit-10,
    .bit-12,
    .bit-4,
    .bit-6,
    .bit-8 {
      width: 50%;
    }
    .bit-1,
    .bit-11,
    .bit-3,
    .bit-5,
    .bit-7,
    .bit-9 {
      width: 100%;
    }
  }
  /* Mobile */
  
  @media (max-width: 30em) {
    .bit-1,
    .bit-10,
    .bit-11,
    .bit-12,
    .bit-2,
    .bit-3,
    .bit-4,
    .bit-5,
    .bit-6,
    .bit-7,
    .bit-8,
    .bit-9 {
      width: 100%;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;!-- Hero Image --&gt;
      &lt;div class="bit-1"&gt;
      &lt;div class="box"&gt;hero&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Mini CSS Slider --&gt;
      &lt;div class="bit-1"&gt;
      &lt;div class="box"&gt;mini slider&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Story1 with Rollover Hover --&gt;
      &lt;div class="bit-2"&gt;
      &lt;div class="imgHover"&gt;&lt;img src="http://i.imgur.com/IbeKjJZ.jpg" width="100%"&gt;
      &lt;p class="important"&gt;Hey there.&lt;/p&gt;
      &lt;button&gt;Shop Now&lt;/button&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Story2 with Rollover Hover --&gt;
      &lt;div class="bit-2"&gt;
      &lt;div class="imgHover"&gt;&lt;img src="http://i.imgur.com/0hFyr98.jpg" width="100%"&gt;&lt;button&gt;Shop Now&lt;/button&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Story3 with Rollover Hover --&gt;
      &lt;div class="bit-2"&gt;
      &lt;img src="http://i.imgur.com/0hFyr98.jpg" width="100%"&gt;&lt;button class="static"&gt;Shop Now&lt;/button&gt;
      &lt;/div&gt;
      &lt;!-- Story4 with Rollover Hover --&gt;
      &lt;div class="bit-2"&gt;
      &lt;img src="http://i.imgur.com/IbeKjJZ.jpg" width="100%"&gt;&lt;button class="static"&gt;Shop Now&lt;/button&gt;
      &lt;/div&gt;
      &lt;!-- Skinny Banner --&gt;
      &lt;div class="bit-1"&gt;
      &lt;div class="box"&gt;small banner&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Rewards --&gt;
      &lt;div class="bit-2"&gt;
      &lt;div class="box"&gt;rewards&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Store Locator --&gt;
      &lt;div class="bit-2"&gt;
      &lt;div class="box"&gt;store locator&lt;/div&gt;
      &lt;/div&gt;
      
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So here is a screen shot of what I originally had an it worked fine with the same code. So maybe I'm missing something? Any suggestions would be greatly appreciated.</p>
  
  <p><a href="https://i.stack.imgur.com/wtUYt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wtUYt.png" alt="enter image description here"></a></p>