画像にカーソルを乗せたら、フワッと黒くして文字を表示したい

Question

前提・実現したいこと

１枚目の画像にカーソルを合わせると、２枚目の画像のようにしたい。

表示させるときにフワッと表示させたいと思ってるのですが、フワッと表示させるどころか画像の上に文字を重ねることすらできなくて困ってます。

初歩的な質問なのはわかってますが、よろしくお願いいたします。

該当のソースコード

<div class="profile">
　<div class="profile-pic">
　　<a href="profile.html"><img src="images/card/profile.jpg" width="70%"　height="450px">
　</div>
　<div class="work-title">
　　<p>POPVIRUS PLAYER</p>
　</div>
</div>

.work-title{
  margin: 0 auto 60px auto;
}
.work-title p{
  width:70%;
  height:450px;
  position: absolute;
  z-index: 10;
}

Comments

[yambejp]

sample画像がでかすぎて処理がブレると思います

Answer 1

同じサイズのdivをz-index指定してのせてopacityを下げればよいでしょう

• codepen hover fadeIn

Comments

[umi3]

回答ありがとうございます。
とりあえずわかる範囲までhtmlとCSSを更新いたしました。

変更したのですが、画像の上に文字が上手く乗りませんでした・・・

[yambejp]

中途半端ですがcodepenにサンプル上げておきました

[umi3]

ありがとうございます！
ここまでやってもらえればあとは自分で勉強します！！