:afterで追加してる半透明の幕を画像と重ねたいのですが、基準点を画像の左上(.img-b)にしているつもりがh3に基準点があってしまいます。なぜでしょうか。
https://gyazo.com/229b691489c2442d467cd677ae8a2c2b
html
1 <div class="news"> 2 <div class="h2"> 3 <h2>WHAT'S NEWS</h2> 4 </div> 5 <div class="newsBox"> 6 <div class="newsBox-1 newsB"> 7 <a href=""> 8 <div class="img-b"> 9 <img src="img/news.kei1.jpg"> 10 <h3>FROM KEI<br>2018.10.10</h3> 11 </div> 12 <p>【お知らせ】インタビュー(2回戦終了後)/男子テニスATPワールドツアー マスターズ1000 上海</p> 13 <p>大会第4日、2回戦 ウー・イービンとの戦いに勝利した錦織選手のインタビュー。※日本語は後半部分となります▶錦織圭 インタビュー(2回戦終了後)/男子テニスATPワールドツアー マスターズ1000 上海今すぐ動画をチェック!⇒</p> 14 </a> 15 </div> 16 <div class="newsBox-2 newsB"> 17 <a href=""> 18 <div class="img-b-2"> 19 <div class="img-box"></div> 20 <h3>RESULT</h3> 21 </div> 22 <p>上海 ロレックス・マスターズ</p> 23 <p>準決勝ロジャー・フェデラー(スイス)</p> 24 </a> 25 </div> 26 <div class="newsBox-3 newsB"> 27 <a href=""> 28 <div class="img-b"> 29 <img src="img/news.kei3.jpg"> 30 <h3>FROM KEI<br>2018.10.06</h3> 31 </div> 32 <p>【お知らせ】インタビュー(準決勝直後オンコート)/楽天ジャパンオープンテニス2018</p> 33 <p>大会第6日、準決勝に勝利し、同大会で4年ぶりの決勝進出を決めた錦織選手の試合直後のインタビュー!難敵リシャール・ガスケ選手との戦いを振り返るとともに、ダブルスに出場している内山選手へエールを送りました。▶錦織圭 インタビュー(準決勝直後オンコート)/楽天ジャパンオープンテニス2018動画をチェック!⇒</p> 34 </a> 35 </div> 36 <div class="newsBox-4 newsB"> 37 <a href=""> 38 <div class="img-b"> 39 <img src="img/news.kei4.jpg"> 40 <h3>FROM KEI<br>2018.10.06</h3> 41 </div> 42 <p>【お知らせ】インタビュー(準々決勝直後オンコート)/楽天ジャパンオープンテニス2018</p> 43 <p>大会第5日、準々決勝に勝利し、ベスト4進出を決めた錦織選手の試合直後のインタビュー!期待の若手、ステファノス・チチパス選手をストレートで下した、「いいテニスができていた」戦いを振り返りました。▶錦織圭 インタビュー(準々決勝直後オンコート)/楽天ジャパンオープンテニス2018今すぐ動画をチェック!⇒</p> 44 </a> 45 </div> 46 <div class="newsBox-5 newsB"> 47 <a href=""> 48 <div class="img-b"> 49 <img src="img/news.kei5.jpg"> 50 <h3>FROM KEI<br>2018.10.04</h3> 51 </div> 52 <p>【お知らせ】インタビュー(2回戦直後オンコート)/楽天ジャパンオープンテニス2018</p> 53 <p>大会第3日、2回戦に勝利した錦織選手の試合直後のインタビュー!「出だしはむちゃくちゃ良かった」というブノワ・ペール選手との戦いを振り返りました。▶錦織圭 インタビュー(2回戦直後オンコート)/楽天ジャパンオープンテニス2018今すぐ動画をチェック!⇒</p> 54 </a> 55 </div> 56 <div class="newsBox-6 newsB"> 57 <a href=""> 58 <div class="img-b"> 59 <img src="img/news.kei6.jpg"> 60 <h3>FROM KEI<br>2018.10.02</h3> 61 </div> 62 <p>【お知らせ】インタビュー(2回戦直後オンコート)/楽天ジャパンオープンテニス2018</p> 63 <p>大会第1日、1回戦に勝利した錦織選手の試合直後のインタビュー!杉田祐一選手との戦いを振り返りました。▶錦織圭 インタビュー(1回戦直後オンコート)/楽天ジャパンオープンテニス2018今すぐ動画をチェック!⇒</p> 64 </a> 65 </div> 66 </div>
css
1.newsB { 2 width: 500px; 3 height: 500px; 4 background-color: #fff; 5} 6 7.img-box { 8 width: 500px; 9 height: 306px; 10 background-color: #0f5; 11} 12 13.img-b, .img-b-2 { 14 position: relative; 15} 16 17.img-b img { 18 vertical-align: bottom; 19 20} 21 22.img-b :after { 23 content: ''; 24 width: 500px; 25 height: 306px; 26 background: rgb(0,0,0,0.5); 27 position: absolute; 28 top: 0; 29 left: 0; 30} 31 32.newsB a:hover .img-b :after { 33 background: rgb(0,0,0,0.2); 34} 35 36.newsB a:hover .img-box:after { 37 content: ''; 38 width: 500px; 39 height: 306px; 40 position: absolute; 41 top: 0; 42 left: 0; 43 background: rgb(0,0,0,0.5); 44} 45 46h3 { 47 position: absolute; 48 top: 50%; 49 left: 50%; 50 color: #fff; 51}
回答2件
あなたの回答
tips
プレビュー