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中心文本。虽然它可能不像使用单独的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内的div.img-with-text创建透明叠加层，以便使用此代码

.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绝对大小在相对div.img-with-text内。

现在提供您需要添加的最新代码：

.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/

如何在鼠标悬停时创建带文本的透明叠加层？

2 个答案: