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

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.

我对此非常困惑,我觉得我真的不应该这样。当您的鼠标悬停在图像上时,我正试图在图像上显示带有文本的透明叠加层。我有透明的叠加工作正常,文本出现,但我无法弄清楚如何居中文本或如何更改字体等。它也看起来像底部图像不一样大小,我我不确定为什么。

I feel that I may doing this the wrong way.

我觉得我可能做错了。

The JSFiddle: https://jsfiddle.net/w758bg0s/5/ Scroll down to the bottom of the CSS to find my code.

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

I'm trying to copy this website from scratch: http://www.lemonadela.com/, just to get some experience with creating all the features that the site has.

我正试图从头开始复制这个网站:http://www.lemonadela.com/,只是为了获得一些创建网站所有功能的经验。

Thank you for any advice/suggestions.

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

-All the best

-祝一切顺利

2 个解决方案

#1

First you have to start with this html code:

首先,你必须从这个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>

now you have to create transparent overlay from that div inside your div.img-with-text, so you use this code

现在你必须在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 must be relative, otherwise absolute would expand over whole page, now is div absolute size inside relative div.img-with-text.

.img-with-text必须是相对的,否则绝对会扩展整个页面,现在是相对div.img-with-text内的div绝对大小。

Now comes the latest code you have to add:

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

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

this will change transparent values into something that you can see. Also notice transition: 1s; in img-with-text > div, that sets how long it takes to change colors.

这会将透明值更改为您可以看到的内容。还要注意过渡:1s;在img-with-text> div中,它设置更改颜色所需的时间。

Also here is jsfiddle https://jsfiddle.net/zwpu0LgL/.

这里还有jsfiddle https://jsfiddle.net/zwpu0LgL/。

EDIT:
Also I created another JSFiddle that shows another approach with not changing backgound color of whole div, but just h2 element. https://jsfiddle.net/zwpu0LgL/1/

编辑:我也创建了另一个JSFiddle,显示另一种方法,不改变整个div的背景颜色,但只是h2元素。 https://jsfiddle.net/zwpu0LgL/1/

#2

Adding padding-top: 20%; to your #specials .food-image:after CSS centers the text. Though it probably isn't as robust of a solution as doing it with separate HTML elements.

添加填充顶部:20%;到你的#specials .food-image:在CSS中心文本之后。虽然它可能不像使用单独的HTML元素那样强大。

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

#1