質問編集履歴

2

スクショ追加

2018/10/28 01:39

投稿

tunnel
tunnel

スコア30

test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,10 @@
1
1
  :afterで追加してる半透明の幕を画像と重ねたいのですが、基準点を画像の左上(.img-b)にしているつもりがh3に基準点があってしまいます。なぜでしょうか。
2
2
 
3
+ https://gyazo.com/229b691489c2442d467cd677ae8a2c2b
4
+
3
5
  ```html
4
6
 
5
- <div class="news">
7
+     <div class="news">
6
8
 
7
9
  <div class="h2">
8
10
 
@@ -132,7 +134,7 @@
132
134
 
133
135
  </div>
134
136
 
135
- </div>
137
+ </div>
136
138
 
137
139
  ```
138
140
 

1

すみません、、直しました

2018/10/28 01:39

投稿

tunnel
tunnel

スコア30

test CHANGED
File without changes
test CHANGED
@@ -2,6 +2,142 @@
2
2
 
3
3
  ```html
4
4
 
5
+ <div class="news">
6
+
7
+ <div class="h2">
8
+
9
+ <h2>WHAT'S NEWS</h2>
10
+
11
+ </div>
12
+
13
+ <div class="newsBox">
14
+
15
+ <div class="newsBox-1 newsB">
16
+
17
+ <a href="">
18
+
19
+ <div class="img-b">
20
+
21
+ <img src="img/news.kei1.jpg">
22
+
23
+ <h3>FROM KEI<br>2018.10.10</h3>
24
+
25
+ </div>
26
+
27
+ <p>【お知らせ】インタビュー(2回戦終了後)/男子テニスATPワールドツアー マスターズ1000 上海</p>
28
+
29
+ <p>大会第4日、2回戦 ウー・イービンとの戦いに勝利した錦織選手のインタビュー。※日本語は後半部分となります▶錦織圭 インタビュー(2回戦終了後)/男子テニスATPワールドツアー マスターズ1000 上海今すぐ動画をチェック!⇒</p>
30
+
31
+ </a>
32
+
33
+ </div>
34
+
35
+ <div class="newsBox-2 newsB">
36
+
37
+ <a href="">
38
+
39
+ <div class="img-b-2">
40
+
41
+ <div class="img-box"></div>
42
+
43
+ <h3>RESULT</h3>
44
+
45
+ </div>
46
+
47
+ <p>上海 ロレックス・マスターズ</p>
48
+
49
+ <p>準決勝ロジャー・フェデラー(スイス)</p>
50
+
51
+ </a>
52
+
53
+ </div>
54
+
55
+ <div class="newsBox-3 newsB">
56
+
57
+ <a href="">
58
+
59
+ <div class="img-b">
60
+
61
+ <img src="img/news.kei3.jpg">
62
+
63
+ <h3>FROM KEI<br>2018.10.06</h3>
64
+
65
+ </div>
66
+
67
+ <p>【お知らせ】インタビュー(準決勝直後オンコート)/楽天ジャパンオープンテニス2018</p>
68
+
69
+ <p>大会第6日、準決勝に勝利し、同大会で4年ぶりの決勝進出を決めた錦織選手の試合直後のインタビュー!難敵リシャール・ガスケ選手との戦いを振り返るとともに、ダブルスに出場している内山選手へエールを送りました。▶錦織圭 インタビュー(準決勝直後オンコート)/楽天ジャパンオープンテニス2018動画をチェック!⇒</p>
70
+
71
+ </a>
72
+
73
+ </div>
74
+
75
+ <div class="newsBox-4 newsB">
76
+
77
+ <a href="">
78
+
79
+ <div class="img-b">
80
+
81
+ <img src="img/news.kei4.jpg">
82
+
83
+ <h3>FROM KEI<br>2018.10.06</h3>
84
+
85
+ </div>
86
+
87
+ <p>【お知らせ】インタビュー(準々決勝直後オンコート)/楽天ジャパンオープンテニス2018</p>
88
+
89
+ <p>大会第5日、準々決勝に勝利し、ベスト4進出を決めた錦織選手の試合直後のインタビュー!期待の若手、ステファノス・チチパス選手をストレートで下した、「いいテニスができていた」戦いを振り返りました。▶錦織圭 インタビュー(準々決勝直後オンコート)/楽天ジャパンオープンテニス2018今すぐ動画をチェック!⇒</p>
90
+
91
+ </a>
92
+
93
+ </div>
94
+
95
+ <div class="newsBox-5 newsB">
96
+
97
+ <a href="">
98
+
99
+ <div class="img-b">
100
+
101
+ <img src="img/news.kei5.jpg">
102
+
103
+ <h3>FROM KEI<br>2018.10.04</h3>
104
+
105
+ </div>
106
+
107
+ <p>【お知らせ】インタビュー(2回戦直後オンコート)/楽天ジャパンオープンテニス2018</p>
108
+
109
+ <p>大会第3日、2回戦に勝利した錦織選手の試合直後のインタビュー!「出だしはむちゃくちゃ良かった」というブノワ・ペール選手との戦いを振り返りました。▶錦織圭 インタビュー(2回戦直後オンコート)/楽天ジャパンオープンテニス2018今すぐ動画をチェック!⇒</p>
110
+
111
+ </a>
112
+
113
+ </div>
114
+
115
+ <div class="newsBox-6 newsB">
116
+
117
+ <a href="">
118
+
119
+ <div class="img-b">
120
+
121
+ <img src="img/news.kei6.jpg">
122
+
123
+ <h3>FROM KEI<br>2018.10.02</h3>
124
+
125
+ </div>
126
+
127
+ <p>【お知らせ】インタビュー(2回戦直後オンコート)/楽天ジャパンオープンテニス2018</p>
128
+
129
+ <p>大会第1日、1回戦に勝利した錦織選手の試合直後のインタビュー!杉田祐一選手との戦いを振り返りました。▶錦織圭 インタビュー(1回戦直後オンコート)/楽天ジャパンオープンテニス2018今すぐ動画をチェック!⇒</p>
130
+
131
+ </a>
132
+
133
+ </div>
134
+
135
+ </div>
136
+
137
+ ```
138
+
139
+ ```css
140
+
5
141
  .newsB {
6
142
 
7
143
  width: 500px;
@@ -105,109 +241,3 @@
105
241
  }
106
242
 
107
243
  ```
108
-
109
- ```css
110
-
111
- .newsB {
112
-
113
- width: 500px;
114
-
115
- height: 500px;
116
-
117
- background-color: #fff;
118
-
119
- }
120
-
121
-
122
-
123
- .img-box {
124
-
125
- width: 500px;
126
-
127
- height: 306px;
128
-
129
- background-color: #0f5;
130
-
131
- }
132
-
133
-
134
-
135
- .img-b, .img-b-2 {
136
-
137
- position: relative;
138
-
139
- }
140
-
141
-
142
-
143
- .img-b img {
144
-
145
- vertical-align: bottom;
146
-
147
-
148
-
149
- }
150
-
151
-
152
-
153
- .img-b :after {
154
-
155
- content: '';
156
-
157
- width: 500px;
158
-
159
- height: 306px;
160
-
161
- background: rgb(0,0,0,0.5);
162
-
163
- position: absolute;
164
-
165
- top: 0;
166
-
167
- left: 0;
168
-
169
- }
170
-
171
-
172
-
173
- .newsB a:hover .img-b :after {
174
-
175
- background: rgb(0,0,0,0.2);
176
-
177
- }
178
-
179
-
180
-
181
- .newsB a:hover .img-box:after {
182
-
183
- content: '';
184
-
185
- width: 500px;
186
-
187
- height: 306px;
188
-
189
- position: absolute;
190
-
191
- top: 0;
192
-
193
- left: 0;
194
-
195
- background: rgb(0,0,0,0.5);
196
-
197
- }
198
-
199
-
200
-
201
- h3 {
202
-
203
- position: absolute;
204
-
205
- top: 50%;
206
-
207
- left: 50%;
208
-
209
- color: #fff;
210
-
211
- }
212
-
213
- ```