【CSS】画像のオーバーレイアニメーション

画像にマウスオーバーしたときにオーバーレイがかかるようなアニメーションを紹介します。CSSだけで実装することができる簡単な作りとなっています。

オーバーレイの作り方

オーバーレイさせるアニメーションをつけるには、疑似要素を利用して作ることができます。

.img-overlay {
  position: relative;
  display: inline-block;
}
.img-overlay::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 0;
  height: 100%;
  background: #fff;
  opacity: .5;
  transition:all 0.3s ease;
}
.img-overlay:hover:after {
  width: 100%;
}

まずは、画像を囲むボックスを「display: inline-block;」にしておきます。そして、::after疑似要素を使ってオーバーレイの動きをつけていきます。最初は「width: 0;」として見えないようにしておき、マウスオーバーしたら「width:100%;」にして見えるようにしています。上記の場合は「left: 0;」としているので、左から右へ動きます。

角度をつければ、斜めから出すこともできます。

.img-overlay {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.img-overlay::after {
  position: absolute;
  top: 0;
  left: -160px;
  content: "";
  width: 0;
  height: 100%;
  background: #fff;
  opacity: .5;
  transition:all 0.3s ease;
  transform: skew(45deg);
}
.img-overlay:hover:after {
  width: 640px;
}

斜めにする場合は「skew()」を使ってできます。今回は45度傾けた指定をしています。そして、left要素で画像の横幅サイズの半分だけマイナス方向にずらしておきます。このままだとはみ出した状態になるので、親ボックスに「overflow: hidden;」を追加してはみ出した部分を見えないようにします。そして、マウスオーバーしたときには、画像サイズの2倍の値を指定します。

以上が、画像をマウスオーバーしたときにオーバーレイをかけるアニメーションの作り方となります。