imgホバー時の個別にキャプション表示をしたい。

Question

imgホバーでキャプションを表示させるために以下のように実装したのですが、一つの画像をホバーするとその他にもホバー時の効果が適用されてしまいます。

<ul>
  <li>
    <a href="リンク先URL">
      <img src="画像URL">
      <div class="img--mask">
        <div class="caption">１番</div>
      </div>
    </a>
　　</li>
　　<li>
    <a href="リンク先URL">
      <img src="画像URL">
      <div class="img--mask">
        <div class="caption">2番</div>
      </div>
    </a>
　　</li>
</ul>

// 追記文
ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
}
li {
  width: 100%;
}
a {
  display: block;
  overflow: hidden;
}
img {
  width: 100%;
  display: block;
}
// 追記終了


.img--mask {
  width:  100%;
  height: 100%;
  position: absolute;
  top: 0;
  left:	0;
  opacity: 0;	/* マスクの非表示 */
  background-color: rgba(0,0,0,0.4);
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
.img--mask:hover {
  opacity: 1;	/* マスクを表示 */
  padding-left:	90px;	/* 右にずらす */
  width: calc(100% - 90px);
}
.img--mask .caption {
  color: #fff;
}

ホバーされている画像のみキャプションを表示させたい場合はどのようにするものなのでしょうか？
JavaScript等を使用した方法など、いいやり方があれば教えてください！

Comments

[m.ts10806]

ul,li
またはその中のaのCSSはどうなっていますか？
今のままですと１番にhoverするのは困難と思います。

[cicle]

ありがとうございます！
追記しました！

[m.ts10806]

コピペですぐ再現確認できることが望ましいのでcss のコメントで // は使えないので、実際のコードにないものは避けてもらえたら・・・
※追記があったことは編集履歴から確認できます

[m.ts10806]

ただ、これでも画面全体にキャプションでてきますけど、そういう仕様なんですか？

追記：positionの問題ですね。既についた回答で解決可能です

[cicle]

「コピペですぐ再現確認出来ることが望ましい」
質問のやり方に関して勉強になりました！
今後はそのように気をつけます！

Answer 1

親要素のaにposition: relative;を追加してみてはいかがでしょうか

Comments

[cicle]

ありがとうございます！

Answer 2

.img--mask {

width: 100%;
height: 100%

をしてしまうと、画面全部が対象になってしまうので
もっと常識的な範囲に絞って処理してはどうでしょうか？

Comments

[cicle]

ありがとうございます。
画面全体になっているのを、全て反応していると勘違いしておりました・・・