CSS hoverで画像を拡大＋オーバーレイ変化 のtransitionが効かなかった時

マウスオーバーしたら、

画像を拡大＋オーバーレイを薄くする、というのをやりたかった。

a::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, .3),  rgba(0, 0, 0, .6));
  transition: all .2s ease;
}
a:hover img{
    transform: scale(1.1);
}
a:hover::before{
	opacity: .5;
}

こんな感じで、
オーバーレイは擬似要素を使って書いた。

マウスオーバーの時は良いんだけど、
マウスアウト時にオーバーレイのopacityがバキっと変わってしまう。
transitionが効いていなかった。

解決方法

オーバーレイの擬似要素にz-indexを指定してあげた。

a::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, .3),  rgba(0, 0, 0, .6));
  z-index: 1; /****これ****/
  transition: all .2s ease;
}
a:hover img{
    transform: scale(1.1);
}
a:hover::before{
	opacity: .5;
}

すると無事にマウスオーバー・マウスアウトの
両方にアニメーションがかかるようになった。よかった〜