画像に背景色が乗らない

Question

お疲れさまです。

img要素の上に背景色としてうすめのグレーを載せたいのですが、全く疑似要素が表示されず困っております。

      <ul class="image_content">
        <li class="image_item">
          <a href="#"
            ><img class="image_item_image" src="/image/mv02.jpg" alt=""
          /></a>
        </li>
        <li class="image_item">
          <a href="#"
            ><img class="image_item_image" src="/image/mv02.jpg" alt=""
          /></a>
        </li>
        <li class="image_item">
          <a href="#"
            ><img class="image_item_image" src="/image/mv02.jpg" alt=""
          /></a>
        </li>
        <li class="image_item">
          <a href="#"
            ><img class="image_item_image" src="/image/mv02.jpg" alt=""
          /></a>
        </li>
      </ul>

      <div class="WORKS_link_content">
        <a class="WORKS_link" href="#">view more>></a>
      </div>

.image_item {
  overflow: hidden;
  position: relative;
}

.image_item_image {
  width: 100%;
  height: 100%;
  transition: 0.5s;
  background-color: #000;
}

.image_item_image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 1);
}

.image_item_image:hover {
  transform: scale(1.5);
}

状況としては
４枚の画像があり、そのいずれかにマウスホバーしたときに背景色がふわっと浮かび上がるような仕組みを考えておりました。おそらくCSSのみで実装ができるかと考えていたので、疑似要素を利用して作ることを考えていたのですが、ホバー時はともかく、そもそも疑似要素すら画面上に標示されない状況です。

ちなみにディベロッパーツールでソースコードを見るとしっかり、beforeやafterの文字は表示されていたので、要素としては認識されているみたいでした。

試したこと

・z-indexをいじってみる。
・間違いではないかと思い、position:rerlativeを付与する対象を変えてみた。
・親要素などにも高さをもたせてみた。
など

いずれも反応なしです。
どなたかお知恵を貸していただけますでしょうか。

Answer 1

img要素の擬似要素つけれません。
imgタグに擬似要素がつけれない記事

imgタグの代わりにdivタグの背景画像指定で作ればいけるんじゃないですかね。それか擬似要素ではなくて被せる用の要素を別に作るか

Comments

[pr_777]

無事解決しました。
恥ずかしながら、その特性を知りませんでした。、笑
ありがとうございました。