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;
}

鼠标悬停时网格中图像的文本叠加

1 个答案: