鼠标悬停时如何创建带有文本的透明覆盖层？

Question

我对此一无所知，我觉得我真的不应该。 当鼠标悬停在图像上时，我尝试在图像上显示带有文本的透明覆盖层。 我的透明覆盖层可以正常工作，并且出现了文本，但是我不知道如何居中放置文本或如何更改字体等。看起来底部图像的大小也不一样，不知道为什么。

我觉得我这样做可能是错误的。

JSFiddle： https ://jsfiddle.net/w758bg0s/5/向下滚动到CSS的底部以找到我的代码。

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

我正尝试从头开始复制此网站： http : //www.lemonadela.com/ ，只是为了获得创建该网站所有功能的经验。

感谢您的任何建议/建议。

-祝一切顺利

Answer 1

添加padding-top: 20%; 到#specials .food-image:after CSS居中#specials .food-image:after 。 尽管它可能不像使用单独的HTML元素那样强大。

JSFiddle： https ：//jsfiddle.net/w758bg0s/12/

Answer 2

首先，您必须从以下html代码开始：

<div class="img-with-text">
    <img src="http://z.lmnd3.com.s3.amazonaws.com/2015/07/24/20/05/30/422/White_Nectarine_Persian_Cucumbers_English_Peas_Watercress.jpg" alt="image">
    <div><h2>Hello!</h2></div>    
</div>

现在，您必须在div.img-with-text从该div创建透明的叠加层，因此您可以使用此代码

.img-with-text{
    position: relative;
    width: 693px;
}
.img-with-text > div{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0);
    color: transparent;
    transition: 1s;
}

.img-with-text必须是relative ，否则absolute会在整个页面上扩展，现在是div.img-with-text div绝对大小。

现在是您必须添加的最新代码：

.img-with-text > div:hover{
    background-color: rgba(0, 0, 0, 0.2);
    color: white;
}

这会将transparent值更改为您可以看到的内容。 另请注意transition: 1s; 在img-with-text > div ，它设置更改颜色所需的时间。

另外这里是jsfiddle https://jsfiddle.net/zwpu0LgL/ 。

编辑：
我还创建了另一个JSFiddle，它展示了另一种方法，该方法不更改整个div的背景色，而只是更改h2元素。 https://jsfiddle.net/zwpu0LgL/1/