html - 无法让颜色叠加工作。我错过了什么？

Question

我需要将这 4 个框排成一行以具有透明颜色叠加层。当鼠标悬停在元素上时，我需要覆盖消失。悬停效果没什么大不了的，我能理解。我只是无法让叠加层正常工作。非常感谢任何帮助以及任何通用代码指针。

<section class="alltheboxes">
<nav class="blocks">
    <a href><img src="http://1.bp.blogspot.com/-BOnhWvvehfc/TeALNpDgDkI/AAAAAAAAANs/XJFcw2A2kW4/s1600/terrapin-hopsecutioner.jpg"> 
    <span>one</span></a>

  <a href><img src="https://lh3.googleusercontent.com/-fI0W7blvrk0/TXFLhefMQhI/AAAAAAAAAHM/qGdorrJn9rY/s400/191858_168745176511686_168156473237223_421534_1733583_o.jpg"><span>two</span></a>

  <a href><img src="https://lh6.googleusercontent.com/-FYjkHbSx_EI/TXZC8Xl6LHI/AAAAAAAAAHc/gcBMIXQsdVU/s320/IMAG0221.jpg"><span>three</span>
  </a>
    <a href><img src="#"><span>four</span></a>
  </nav>
</section>

CSS

.blocks a {
        position: relative;
        display: block;
        padding-right: 25%;
        padding-bottom: 25%;
        outline: 1px solid black;
        text-decoration: none;
        color: white;
        font-size: 4em;
        width: 25%;
        box-sizing: border-box;
        overflow: hidden;
        float: left;
    }
.blocks img {
        position: absolute;
        height: 100%;
        z-index: 5;
        display: block;
        box-sizing: border-box;

}
.blocks span {
        position: absolute;
        bottom: 0;
        z-index: 9001;
}

仅限 HTML 和 CSS。

如果你想看到它的实际效果 http://codepen.io/jrutishauser/pen/wBdGRd

Answer 1

向每个 a 元素添加一个 :pseudo-element 并将 rgba() 值作为 background-color 并更改 alpha 值rgba(r, g, b, a) on :hover。

Updated CodePen

.blocks a {
  position: relative;
  display: block;
  padding-right: 25%;
  padding-bottom: 25%;
  outline: 1px solid black;
  text-decoration: none;
  color: white;
  font-size: 4em;
  width: 25%;
  box-sizing: border-box;
  overflow: hidden;
  float: left;
}
.blocks img {
  position: absolute;
  height: 100%;
  z-index: 5;
  display: block;
  box-sizing: border-box;
}
.blocks span {
  position: absolute;
  bottom: 0;
  z-index: 6;
}
.alltheboxes a:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(255, 200, 0, 0.5);
  z-index: 7;
  transition: background 0.4s ease;
}
.alltheboxes a:hover:before {
  background: rgba(255, 255, 255, 0);
}

<section class="alltheboxes">
  <nav class="blocks">
    <a href="#">
      <img src="http://1.bp.blogspot.com/-BOnhWvvehfc/TeALNpDgDkI/AAAAAAAAANs/XJFcw2A2kW4/s1600/terrapin-hopsecutioner.jpg" /><span>one</span>
    </a>
    <a href="#">
      <img src="https://lh3.googleusercontent.com/-fI0W7blvrk0/TXFLhefMQhI/AAAAAAAAAHM/qGdorrJn9rY/s400/191858_168745176511686_168156473237223_421534_1733583_o.jpg" /><span>two</span>
    </a>

    <a href="#">
      <img src="https://lh6.googleusercontent.com/-FYjkHbSx_EI/TXZC8Xl6LHI/AAAAAAAAAHc/gcBMIXQsdVU/s320/IMAG0221.jpg" /><span>three</span>
    </a>
    <a href="#">
      <img src="#" /><span>four</span>
    </a>
  </nav>
</section>