Текстовое наложение на изображения в сетке при наведении мыши

Question

Я пытался правильно настроить сетку, но не могу понять, как это сделать. Я хотел бы получить его в 2x2 с текстовым наложением и сменой непрозрачности над каждым изображением, когда мышь нависает над изображением. Я использую каркас CSS скелета.

JSFiddle (для моего CSS прокрутки вниз к нижней части): https://jsfiddle.net/w758bg0s/1/

Вот код, который я написал:

HTML:

<div id="specials"> 
    <div class="container"> 
    <div class="row"> 
     <div class="twelve columns"> 
     <h2>This season's specials:</h2> 
     </div> 
     <div class="row"> 
     <div class="one-half column"> 
      <div class="food-image food1"> 
      <img src="http://z.lmnd3.com.s3.amazonaws.com/2015/07/24/20/05/30/422/White_Nectarine_Persian_Cucumbers_English_Peas_Watercress.jpg"> 
      </div> 
     </div> 
     <div class="one-half column"> 
      <div class="food-image food2"> 
      <img src="http://z.lmnd3.com.s3.amazonaws.com/2015/07/24/20/07/10/934/Spaghetti_Squash_Almonds_Balsamic.jpg"> 
      </div> 
     </div> 
     </div> 
     <div class="row"> 
     <div class="one-half column"> 
     <div class="food-image food3"> 
      <img src="http://z.lmnd3.com.s3.amazonaws.com/2015/07/24/20/08/21/750/Southwest_Panzanella_Pickled_Nopales_Jicama_Corn_Tortilla.jpg"> 
       <div class="img-descrip"> 
        <p>Southwest “Panzanella,” Pickled Nopales, Jicama, Corn Tortilla</p> 
       </div> 
      </div> 
     </div> 
     <div class="one-half column"> 
      <div class="food-image food4"> 
      <img src="http://z.lmnd3.com.s3.amazonaws.com/2015/07/24/20/09/24/865/Roasted_Carrots_Sunchokes_Avocado_Almonds.jpg"> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

CSS:

/* 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{ 

    margin-top: 2rem; 
    max-width: 500px; 
    max-height: 250px; 

} 
#specials img{ 
    height: 100%; 
    width: 100%; 
} 
#specials .img-descrip{ 

    color: #fff; 
    text-align: center; 
} 

Любая помощь или предложения были бы высоко оценены!

Все лучшее -

Answer 1

Попробуйте

#specials .img-descrip { 
    color: #000; 
    margin-top: -5em; 
    position: relative; 
    text-align: center; 
} 

#specials img { 
    height: 100%; 
    opacity: 0.5; 
    width: 100%; 
} 

#specials .food-image:hover img{ 
    opacity:1; 
}