positionが合わない。

Question

:afterで追加してる半透明の幕を画像と重ねたいのですが、基準点を画像の左上（.img-b）にしているつもりがh3に基準点があってしまいます。なぜでしょうか。
https://gyazo.com/229b691489c2442d467cd677ae8a2c2b

 　　　　<div class="news">
          <div class="h2">
            <h2>WHAT'S NEWS</h2> 
          </div>
          <div class="newsBox">
            <div class="newsBox-1 newsB">
              <a href="">
                <div class="img-b">
                  <img src="img/news.kei1.jpg">
                  <h3>FROM KEI<br>2018.10.10</h3>
                </div>
                <p>【お知らせ】インタビュー（２回戦終了後）/男子テニスATPワールドツアー　マスターズ1000　上海</p>
                <p>大会第4日、2回戦 ウー・イービンとの戦いに勝利した錦織選手のインタビュー。※日本語は後半部分となります▶錦織圭 インタビュー(2回戦終了後)／男子テニスATPワールドツアー マスターズ1000 上海今すぐ動画をチェック！⇒</p>
              </a>
            </div>
            <div class="newsBox-2 newsB">
              <a href="">
                <div class="img-b-2">
                  <div class="img-box"></div>
                  <h3>RESULT</h3>
                </div>
                <p>上海　ロレックス・マスターズ</p>
                <p>準決勝ロジャー・フェデラー（スイス）</p>
              </a>
            </div>
            <div class="newsBox-3 newsB">
              <a href="">
                <div class="img-b">
                  <img src="img/news.kei3.jpg">
                  <h3>FROM KEI<br>2018.10.06</h3>
                </div>
                <p>【お知らせ】インタビュー（準決勝直後オンコート）/楽天ジャパンオープンテニス2018</p>
                <p>大会第6日、準決勝に勝利し、同大会で4年ぶりの決勝進出を決めた錦織選手の試合直後のインタビュー！難敵リシャール・ガスケ選手との戦いを振り返るとともに、ダブルスに出場している内山選手へエールを送りました。▶錦織圭 インタビュー(準決勝直後オンコート)／楽天ジャパンオープンテニス2018動画をチェック！⇒</p>
              </a>
            </div>
            <div  class="newsBox-4 newsB">
              <a href="">
                <div class="img-b">
                  <img src="img/news.kei4.jpg">
                  <h3>FROM KEI<br>2018.10.06</h3>
                </div>
                <p>【お知らせ】インタビュー（準々決勝直後オンコート）/楽天ジャパンオープンテニス2018</p>
                <p>大会第5日、準々決勝に勝利し、ベスト4進出を決めた錦織選手の試合直後のインタビュー！期待の若手、ステファノス・チチパス選手をストレートで下した、「いいテニスができていた」戦いを振り返りました。▶錦織圭 インタビュー(準々決勝直後オンコート)／楽天ジャパンオープンテニス2018今すぐ動画をチェック！⇒</p>
              </a>
            </div>
            <div class="newsBox-5 newsB">
              <a href="">
                <div class="img-b">
                  <img src="img/news.kei5.jpg">
                  <h3>FROM KEI<br>2018.10.04</h3>
                </div>
                <p>【お知らせ】インタビュー（2回戦直後オンコート）/楽天ジャパンオープンテニス2018</p>
                <p>大会第3日、2回戦に勝利した錦織選手の試合直後のインタビュー！「出だしはむちゃくちゃ良かった」というブノワ・ペール選手との戦いを振り返りました。▶錦織圭 インタビュー(2回戦直後オンコート)／楽天ジャパンオープンテニス2018今すぐ動画をチェック！⇒</p>
              </a>
            </div>
            <div class="newsBox-6 newsB">
              <a href="">
                <div class="img-b">
                  <img src="img/news.kei6.jpg">
                  <h3>FROM KEI<br>2018.10.02</h3>
                </div>
                <p>【お知らせ】インタビュー（2回戦直後オンコート）/楽天ジャパンオープンテニス2018</p>
                <p>大会第1日、1回戦に勝利した錦織選手の試合直後のインタビュー！杉田祐一選手との戦いを振り返りました。▶錦織圭 インタビュー(1回戦直後オンコート)／楽天ジャパンオープンテニス2018今すぐ動画をチェック！⇒</p>
              </a>
            </div>
          </div>       

.newsB {
  width: 500px;
  height: 500px;
  background-color: #fff;
}

.img-box {
  width: 500px;
  height: 306px;
  background-color: #0f5;
}

.img-b, .img-b-2 {
  position: relative;
}

.img-b img {
  vertical-align: bottom;
  
}

.img-b :after {
  content: '';
  width: 500px;
  height: 306px;
  background: rgb(0,0,0,0.5);
  position: absolute;
  top: 0;
  left: 0;
}

.newsB a:hover .img-b :after {
  background: rgb(0,0,0,0.2);
}

.newsB a:hover .img-box:after {
  content: '';
  width: 500px;
  height: 306px;
  position: absolute;
  top: 0;
  left: 0;
  background: rgb(0,0,0,0.5);
}

h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #fff;
}

Comments

[akihiro3]

どちらもcssの内容になってしまってますよー

[yoshinavi]

HTMLコードを提示してください。位置関係が確認出来ません。

[tunnel]

すみません、、お願いします

Answer 1

CSSのセレクタ名に空白がありますが、詰めてみてはどうですか？

.img-b :after {
　※※※
}

↓

.img-b:after {
　※※※
}

Comments

[tunnel]

ありがとうございます！あと、みなさん全角スペースだったり、細かいとこ見えないところによく気がつくなあと思うのですが、何か方法があるんですか？

[yoshinavi]

個人的なデバッグ方法ですが、エディターにも寄ると思います。

各種の色設定が出来たり、インデントを揃える癖をつけると、誤記入でインデントが崩れたり色が変わったりで分かりやすくなります。

また、各ブラウザのデベロッパーツールで、不具合箇所を大まかな所から細部に絞り込んで行くと、検証しやすくなります。

色々と検索して、理解しやすいデバッグ方法を試してみてください。

[tunnel]

わかりました。ご回答ありがとうございました＾＾

[yoshinavi]

解決されて何よりです。
(^^)

Answer 2

after擬似要素に

bottom:○○;

でh3の高さ分指定すればどうでしょう？

Comments

[akihiro3]

あれ？
画像とh3って重なってるのです？

こちらの理解が間違ってるようでしたら、
申し訳ないですがスクリーンショットを貼ってください

[tunnel]

重なっています。わかりました。