title: make text on half transparent overlay opaque (also alignment)
body: <p>I have a basic question about text on a non-opaque overlay. Currently, I have this: <a href="http://jsfiddle.net/SdsJ9/134/" rel="nofollow">JSFiddle</a>. However, the word kitty is not opaque and you can see the image below. How can I make it have transparency:1 while still have the current overlay effect?</p>
  
  <p>Also, how can I align the text vertically?</p>
  
  <p>Thank you guys soooo much! I have been struggling with CSS for awhile.</p>
  
  <p>html code:</p>
  
  <pre><code>&lt;div class="bucket"&gt;
  &lt;a href="#"&gt;
  &lt;img src="http://kittybloger.files.wordpress.com/2012/05/cute-kittens-20-great-pictures-1.jpg" alt="" class="bucket"/&gt; 
  &lt;div class="img-overlay"&gt;
      &lt;h3&gt;kitty&lt;/h3&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS code:</p>
  
  <pre><code>.bucket {
  width: 31%;
  float: left;
  position: relative;
  margin-top: 1%;
  margin-right: 1%;
  margin-bottom: 1%;
  margin-left: 1%;
  text-shadow: 0px 0px 0px;
  -webkit-box-shadow: 0px 0px 0px;
  box-shadow: 0px 0px 0px;
  background-color: rgba(255,255,255,1.00);
  overflow: hidden;   
  }
  
  .img-overlay h3 {
  opacity: 1;
  color: rgba(255,254,254,1.00);
  text-align: center;
  vertical-align: middle;
  height: 100%;
  }
  
  .img-overlay {
  background-color: rgba(0,0,0,1.00);
  bottom: 0px;
  top: 0px;
  opacity: 0;
  overflow:hidden
  filter: alpha(opacity=0);
  position: absolute;
  width: 100%;
  z-index: 1000;
  transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
   }
  .bucket:hover .img-overlay {
  opacity:0.75;
  filter: alpha(opacity=75);
  }
  
  .bucket img {
  width: 100%;
  }
  </code></pre>