title: How do you create a transparent overlay with text upon mouse hover?
body: <p>I'm getting super stuck on this and I feel like I really shouldn't be. I'm trying to have a transparent overlay with text appear on an image when your mouse hovers over the image. I have the transparent overlay working correctly, and the text appearing, but I can't figure out how to center the text or how to change the font, etc. It also looks like the bottom images aren't the same size, and I'm not sure why.</p>
  
  <p>I feel that I may doing this the wrong way.</p>
  
  <p>The JSFiddle: <a href="https://jsfiddle.net/w758bg0s/5/" rel="nofollow">https://jsfiddle.net/w758bg0s/5/</a>
  Scroll down to the bottom of the CSS to find my code.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="specials"&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="twelve columns"&gt;
          &lt;h2&gt;This season's specials:&lt;/h2&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
          &lt;div class="one-half column"&gt;
            &lt;div class="food-image food1"&gt;
              &lt;img src="http://z.lmnd3.com.s3.amazonaws.com/2015/07/24/20/05/30/422/White_Nectarine_Persian_Cucumbers_English_Peas_Watercress.jpg"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="one-half column"&gt;
            &lt;div class="food-image food2"&gt;
              &lt;img src="http://z.lmnd3.com.s3.amazonaws.com/2015/07/24/20/07/10/934/Spaghetti_Squash_Almonds_Balsamic.jpg"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row"&gt;
          &lt;div class="one-half column"&gt;
          &lt;div class="food-image food3"&gt;
              &lt;img src="http://z.lmnd3.com.s3.amazonaws.com/2015/07/24/20/08/21/750/Southwest_Panzanella_Pickled_Nopales_Jicama_Corn_Tortilla.jpg"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="one-half column"&gt;
            &lt;div class="food-image food4"&gt;
              &lt;img src="http://z.lmnd3.com.s3.amazonaws.com/2015/07/24/20/09/24/865/Roasted_Carrots_Sunchokes_Avocado_Almonds.jpg"&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/* Specials
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  #specials{
    background-image: url(http://i.lmnd3.com/images/LemonadeBkg_Avoc.jpg);
    text-align: center;
    min-height: 800px;
  }
  #specials h2{
    margin-top: 10rem;
    color: #FFFFFF;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
    text-transform: uppercase;
  }
  #specials .food-image{
    position: relative;
    margin-top: 2rem;
    max-width: 500px;
    max-height: 250px;
    overflow: hidden;
  }
  #specials img {
      width: 100%;
      vertical-align: top;
  }
  #specials .food-image:after {
      content: 'Southwest “Panzanella,” Pickled Nopales, Jicama, Corn Tortilla';
      text-align: center;
      color:#fff;
      position: absolute;
      width: 100%; height:100%;
      top:0; left:0;
      background:rgba(0,0,0,0.6);
      opacity: 0;
      transition: all .5s;
      -webkit-transition: all .5s;
  }
  #specials .food-image:hover:after{
    opacity: 1;
  }
  </code></pre>
  
  <p>I'm trying to copy this website from scratch: <a href="http://www.lemonadela.com/" rel="nofollow">http://www.lemonadela.com/</a>, just to get some experience with creating all the features that the site has.</p>
  
  <p>Thank you for any advice/suggestions.</p>
  
  <p>-All the best</p>