画像の上に文字を（応用）

画像の様に各フルーツの画像の上に透明化させた背景グループを真ん中に配置したいのですがどのようなhtml、cssを書いたら良いか分かりません。どなたか手伝って下さい！

html
1     <section>
2       <div class="container-jg">
3         <div class="section-wrapper">
4         <div class="section-title"><h2>フルーツ一覧</h2></div>
5
6         <div class="container-item">
7         <div class="itemA">
8          <a href="..."><img src="りんご画像"/></a>
9          </div>
10            <div class="item-text">
11              <div class="text">
12              <h3 class="white mb-3">りんご</h3>
13              <span class="simple_square_btn2">もっと見る</span>
14              </div>
15            </div>
16           <div class="itemB">
17            <a href="..."><img src="バナナ画像"/></a>
18           </div>
19              <div class="item-text">
20                <div class="text">
21                <h3 class="white mb-3">バナナ</h3>
22                <span class="simple_square_btn2">もっと見る</span>
23                </div>
24              </div>
25           <div class="itemC">
26            <a href="..."><img src="ブドウ画像"/></a>
27           </div>
28              <div class="item-text">
29                <div class="text">
30                <h3 class="white mb-3">ブドウ</h3>
31                <span class="simple_square_btn2">もっと見る</span>
32                </div>
33              </div>
34           <div class="itemD">
35            <a href="..."><img src="梨画像"/></a>
36           </div>
37              <div class="item-text">
38                <div class="text">
39                <h3 class="white mb-3">梨</h3>
40                <span class="simple_square_btn2">もっと見る</span>
41              </div>
42          </div>
43      　</div>
44       </div>
45      </div>
46     </section>
47
48
49         <div class="container-item">
50         <div class="itemA">
51          <a href="..."><img src="りんごの画像"/>
52            <div class="box-text">
53              <div class="text">
54              <h3 class="white mb-3">りんご</h3>
55              <span class="simple_square_btn2">もっと見る</span>
56              </div>
57            </div>
58          </a>
59         </div>
60           <div class="box large">
61            <a href="..."><img src="バナナの画像”/>
62              <div class="box-text">
63                <div class="text">
64                <h3 class="white mb-3">バナナ</h3>
65                <span class="simple_square_btn2">もっと見る</span>
66                </div>
67              </div>
68            </a>
69           </div>
70           <div class="box small">
71            <a href="..."><img src="ブドウの画像"/>
72              <div class="box-text">
73                <div class="text">
74                <h3 class="white mb-3">ブドウ</h3>
75                <span class="simple_square_btn2">もっと見る</span>
76                </div>
77              </div>
78            </a>
79           </div>
80           <div class="box small">
81            <a href="..."><img src="なしの画像"/>
82              <div class="box-text">
83                <div class="text">
84                <h3 class="white mb-3">なし</h3>
85                <span class="simple_square_btn2">もっと見る</span>
86              </div>
87            </a>
88           </div>
89          </div>
90      　</div>
91     </section>

css
1.section-wrapper{
2  width: 1146px;
3  height: 620.5px;
4  background: transparent;
5}
6.container-item{
7  display: grid;
8  grid-template-rows: 271.5px 271.5px;
9  grid-template-columns: 362px 362px 362px;
10  padding-top: 40px;
11}
12.itemA{
13  grid-row: 1 / 3;
14  grid-column: 1 / 2;
15}
16.itemB{
17  grid-row: 1 / 3;
18  grid-column: 2 / 3;
19}
20.itemC{
21  grid-row: 1 / 2;
22  grid-column: 3 / 4;
23}
24.ittemD{
25  grid-row: 2 / 3;
26  grid-column:3 / 4;
27}
28
29.wrap{
30  width: 1146px;
31  height: 543px;
32  background: transparent;
33}
34
35.itemA {
36  position: relative;
37  width: 362px;
38  height: 256.5px;
39}
40.itemB{
41  position: relative;
42  width: 362px;
43  height: 543px;
44}
45.itemC{
46  position: relative;
47  width: 362px;
48  height: 256.5px;
49}
50.itemD{
51  position: relative;
52  width: 362px;
53  height: 256.5px;
54}
55.itemA img{
56  width: 362px;
57  height: 543px;
58  padding-right: 30px;
59}
60.itemB img{
61  width: 362px;
62  height: 543px;
63  padding-right: 30px;
64}
65.itemC img{
66  width: 362px;
67  height: 256.5px;
68  padding-bottom: 31px;
69}
70.itemD img{
71  width: 362px;
72  height: 256.5px;
73}
74.container-item a{
75  text-decoration: none;
76}
77
78.item-text{
79  position: absolute;
80  background-color: #000000;
81  width: 362px;
82  height: 150px;
83  opacity: 0.8;
84}
85
86.text{
87  padding: 33px 114px 33px 115px;
88}
89
90.text h3{
91  font-family: "Adobe Garamond Pro";
92  font-weight: normal;
93  font-size: 36px;
94  letter-spacing: 0.05em;
95  line-height: 58px;
96  text-align: left;
97  color: #fff;
98}
99
100.text span{
101  font-family: "Adobe Garamond Pro";
102  font-weight: normal;
103  font-size: 14px;
104  line-height: 20px;
105  text-align: left;
106  color: #fff;
107}
108
109.simple_square_btn2 {
110	display: block;
111	position: relative;
112	width: 120px;
113  height: 32px;
114	text-align: center;
115	text-decoration: none;
116	color: #1B1B1B;
117	background: #000;
118	border:2px solid #fff;
119}

yambejp

2022/01/24 08:53

> 各フルーツの画像の上に透明化させた背景グループを真ん中に配置したいの意味が伝わってきません

行動規範の内容に同意します

回答2件

grid を使われていてイケていますね。

さて、A を B に相対的に配置するためには、B が親、A が子の親子関係にする必要があって、親要素を position: relative, 子は position: absolute にする必要があります。

参考↓
https://codepen.io/takapiro99/pen/NWwKdMg?editors=1100

投稿2022/01/24 09:30

takapiro99

総合スコア232

shin

2022/01/24 10:05

ご回答ありがとうございます！ gridの便利さに惚れました笑とても参考になります。ちなみにボタンの中のもっと見るを真ん中に配置する際はpaddingで指定したら良いのでしょうか。

takapiro99

2022/01/24 10:09

左右真ん中という意味でしょうか？それでしたら CSS の text-align: center です。上下真ん中は line-height や、vertical-align などがあります。

shin

2022/01/24 13:24

ありがとうございます。参考に致します。

行動規範の内容に同意します

いったんこんな感じで

CSS
1<style>
2.wrap{
3display:flex;
4}
5figure{
6margin:0px;
7align-items: center;
8width: fit-content;
9width:-moz-fit-content;
10position:relative;
11display:flex;
12justify-content:space-around;
13}
14
15figure:not(:first-child){
16  margin-left:30px;
17}
18figure div{
19  font-size:1.5em;
20}
21figure span{
22display:inline-block;
23  margin-top:16px;
24  color:red;
25  background-Color:white;
26}
27
28figcaption{
29height:100px;
30position:absolute;
31font-size:0.7em;
32color:white;
33background:rgba(0,0,0,0.6);
34width:100%;
35text-align:center;
36}
37</style>
38<div class="wrap">
39<figure>
40<img src="http://placeimg.com/200/300/animals" alt="animal">
41<figcaption>
42<div>Animal</div>
43<span>もっと見る</span>
44</figcaption>
45</figure>
46<figure>
47<img src="http://placeimg.com/200/300/nature" alt="nature">
48<figcaption>
49<div>Nature</div>
50<span>もっと見る</span>
51</figcaption>
52</figure>
53<figure>
54<img src="http://placeimg.com/200/300/tech" alt="tech">
55<figcaption>
56<div>Tech</div>
57<span>もっと見る</span>
58</figcaption>
59</figure>
60</div>

投稿2022/01/24 09:29

yambejp

総合スコア116466

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

画像の上に文字を（応用）

関連した質問