画像のhover時に透けた黒を被せるCSSと、それをmixin化してみた

画像のhover処理について

リンク付きの画像のhover処理ってどうしてますか？

hover用の画像を毎回作成するのは絶対に嫌ですよね？
opacityで透過させるのは簡単でいいですが、薄くすることしかできません。
（僕が知らないだけかもしれませんが…）
サイト全体のhover処理が、元の色より薄くするものであれば、これでいいかもしれませんが、逆に濃くするという場合もあります。

作成したmixin

こんなとき、画像の親クラスに対して、mixinを読むだけで対応できたらいいと思い作ってみました。
そんなに大したものではないですが、こんな感じです。

@mixin hover_black {
  
  position: relative;
  display: inline-block; //blockの方が使い勝手良ければ変更可

  &:hover {
    &:before {
      position: absolute;
      content: '';
      display: block;
      z-index: 100;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.1);
    }
  }
  
  @content;
}

解説

解説する程のものではないですが、簡単に解説します。
見たままですが、hover時にbeforeで擬似要素を置きます。
top, right, bottom, leftをそれぞれ0を指定することで、その要素いっぱいに広がるようにします。
これに対して、background: rgba(0, 0, 0, 0.1);で、hover時の色と透け感を指定しています。
ここの値を変更すれば、お好みの状態にできます。

使用例

<a class="link" href="">
  <img class="imgLink" src="" alt="" width="" height="" />
</a>

.link {
  @include hover_black;
}

もし「この画像のhover処理だけ色変えたい」みたいなことあれば、mixinの最後に@content;をつけておいたので下記のように指定してください。
これで上書きができます。

.link {
  @include hover_black {
    &:hover {
      &:before {
        background: rgba(255, 0, 0, 0.1);
      }
    }
  }
}