html - 如何创建图像悬停叠加淡入

Question

我想做的是创建一个图像悬停叠加层淡入，这样当您将鼠标悬停在图像上时，图像是黑色的，上面有一层黑色不透明的薄膜，上面有文字。当您将鼠标移开时，它只是一个图像。现在，我只有四张图片，上面有文字。

<div id="about-nav" style="display:flex; flex-wrap:wrap; justify-content:center;
    margin-top: 130px; text-align:center; font-family:apple chancery; font-size:25px;">

    <a href="#1a" style="display:block; width:400px; height:220px; background:#ddd
    url(http://i64.tinypic.com/orqzk7.jpg); background-size:cover;
    background-position: 1px 280px; line-height:220px; margin:10px;
    text-decoration:none; color:#C5E3ED;
    text-shadow:4px 1px 2px rgba(0,0,0,0.5);">About</a>

    <a href="#1b" style="display:block; width:400px; height:220px; background:#ddd
    url(http://i65.tinypic.com/2hyxonr.jpg); background-size:cover;
    background-position: -0.1px 260px; line-height:220px; margin:10px;
    text-decoration:none; color:#C5E3ED;
    text-shadow:4px 1px 2px rgba(0,0,0,0.5);">Personality</a>

    <a href="#1c" style="display:block; width:400px; height:220px; background:#ddd url(http://i64.tinypic.com/pnldu.jpg); background-size:cover; line-height:220px; margin:10px; text-decoration:none; color:#C5E3ED; text-shadow:4px 1px 2px rgba(0,0,0,0.5);">Appearence</a>

    <a href="#1d" style="display:block; width:400px; height:220px; background:#ddd
    url(http://i63.tinypic.com/2ilh8r7.jpg); background-size:cover;
    background-position: -0.1px 260px; line-height:220px; margin:10px;
    text-decoration:none; color:#C5E3ED;
    text-shadow:4px 1px 2px rgba(0,0,0,0.5);">History</a>
    </div>

Answer 1

也许你的意思是这样的？如果我理解正确的话。

figure {
  position: relative;
}

figure > img {
  width: 100%;
}

figure > figcaption {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 50px;
  padding-top: 30%;
  opacity: 0;
  transition: 0.5s all;
}

figure:hover > figcaption {
  opacity: 1;
}

<figure>
  <img src="https://www.nps.gov/cari/learn/nature/images/IMG_7245-Oak-Allee-Gate.jpg?maxwidth=650&autorotate=false" alt="Nature photo">
  <figcaption>Nature photo</figcaption>
</figure>

编辑带有链接(以 google 为例)

figure {
  position: relative;
}

figure > img {
  width: 100%;
}

figure > figcaption {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 50px;
  padding-top: 30%;
  opacity: 0;
  transition: 0.5s all;
}

figure > figcaption > a {
  color: #fff;
  text-decoration: none;
 }

figure:hover > figcaption {
  opacity: 1;
}

<figure>
  <img src="https://www.nps.gov/cari/learn/nature/images/IMG_7245-Oak-Allee-Gate.jpg?maxwidth=650&autorotate=false" alt="Nature photo">
  <figcaption>
    <a href="http://google.com">Nature photo</a>
    </figcaption>
</figure>