マウスオーバーで黒の半透明ベタの上に不透明の文字を表示する

追記：
背景色指定にrgb形式を使うと不透明度を指定可能で、その中のテキスト影響を受けないようです。その方法であれば、下記よりも簡単に出来るでしょう。

---

Instagram（インスタグラム）とかで良くある、画像の上にカーソルを重ねると画像が薄暗くなって、その上に白い文字が表示される仕組みの事です。

１つだけなら簡単に作れるものの、同じように複数並んでいる場合はJavaScriptに頼らないと難しいのでは…と考えていた際に、”カーソルを当てた要素のidを取得して子要素のCSSのプロパティを変更する”といった方法で対応した事があります。

ただ、CSSだけで出来るはずだと思い、参考文献を探してみたものの見つけられず、自分なりに考えて作ってみました。

HTML

<div id="outer">
  <div class="img-box">
    <img src="#" />
    <a href="#">
      <div class="overlaid_box blackback"></div>
      <div class="overlaid_box inner_center_box">
        <p>TEXT</p>
      </div>
    </a>
  </div>
  <div class="img-box">
    <img src="#" />
    <a href="#">
      <div class="overlaid_box blackback"></div>
      <div class="overlaid_box inner_center_box">
        <p>TEXT</p>
      </div>
    </a>
  </div>
  <div class="img-box">
    <img src="#" />
    <a href="#">
      <div class="overlaid_box blackback"></div>
      <div class="overlaid_box inner_center_box">
        <p>TEXT</p>
      </div>
    </a>
  </div>
</div>

CSS

#outer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 350px;
}
.img-box{
  position: relative;
  width: 110px;
  height: 110px;
}
.img-box img{
  width: 100%;
  height: 100%;
}
.img-box a:hover > div.blackback{
  opacity: 0.5;
}
.img-box a:hover > div.inner_center_box{
  opacity: 1;
}
.overlaid_box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: ;
}
.img-box div.blackback{
  z-index: 5;
  background-color: #000;
  opacity: 0;
}
.img-box .inner_center_box{
  opacity: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}
.img-box p{
  color: #fff;
  font-size: 17px;
  margin: 0;
}

完成イメージ

解説

画像を配置するボックスの中には、同じ階層で黒背景ベタのボックスとテキストを中央表示させる為のボックスがそれぞれ縦横100%で絶対配置されています。

テキストを黒背景ベタボックスの中に入れてしまうと、黒背景の透明度の影響を受けてしまうので別々にしてあります。

重ね順としてはテキストを中央配置するボックスが上になります。

それら2つのボックスをリンクとし、hover時に要素の透明度を変化させるようにすれば理想通りの動作になります。