JSプラグイン入れてるけど、画像の上に文字等を乗せたい

前提

カルーセルを取り入れようと思っていて、slickというjQueryのプラグインを入れています。

やりたいこと

太枠の四角が画像です。
つまり画像の上に、画像と文字が乗る感じ

問題

ググったら、「画像の上に文字等乗せる」方法は、『まず、画像をdivの中に入れる』と書いてありました。
画像をdivの中にdiv class=""で入れようと思ったのですが、
公式の使用法（真ん中辺り）は、div class=""の後のdivにはclass=""とか掛かってない＆ CSSでややこしくなりそうだったので、困っています。

プラグインはじめてであまりよく分かってないですが、うまいこと乗せる方法教えてください。
（何か変なこと言ってたらごめんなさい）

あと、この※初期化スクリプトを外部のJSファイルに入れることを強くお勧めします。ってどういうことですか？
初期化スクリプトは、最後のscriptの所ですが、これをどうすれば良いんでしょうか？

現状

flexboxで横並びのレイアウトにしてて、

html
1   <img src="img/box.svg" alt="box" width="430" class="box"/>
2<!--▲添付画像の太枠四角-->
3
4 <div id="hero">
5
6  <section>
7   <img src="img/1.png" alt="1" />
8   <h1>title1</h1>
9   <p>
10     text1
11   </p>
12  </section>
13
14  <section>
15   <img src="img/2.png" alt="2" />
16   <h1>title2</h1>
17   <p>
18     text2
19   </p>
20  </section>
21
22  <section>
23   <img src="img/3.png" alt="3" />
24   <h1>title3</h1>
25   <p>
26     text3
27   </p>
28  </section>
29
30 </div>
31

scss
1//sass入れてます
2
3.box {
4  display: block;
5  margin: auto;
6}
7
8 @mixin hero-p {
9   width: 332px;
10 }
11 @mixin hero-i {
12   height: 255px;
13 }
14 #hero {
15   display: flex;
16   display: -webkit-flex;
17   justify-content: space-around;
18   text-align: center;
19    h1,p {
20      flex: none;
21      @include hero-p;
22      text-align: left;
23    }
24    h1 {
25      font-size: 15px;
26    }
27    p {
28      font-size: 12px;
29      line-height: 17px;
30    }
31    img {
32      @include hero-i;
33    }
34  }

css
1.box {
2  display: block;
3  margin: auto; }
4
5#hero {
6  display: flex;
7  display: -webkit-flex;
8  justify-content: space-around;
9  text-align: center; }
10  #hero h1, #hero p {
11    flex: none;
12    width: 332px;
13    text-align: left; }
14  #hero h1 {
15    font-size: 15px; }
16  #hero p {
17    font-size: 12px;
18    line-height: 17px; }
19  #hero img {
20    height: 255px; }

よろしくお願いします。

m.ts10806

2019/02/07 22:25

コンパイル後のcssもご提示いただけますか？

EXIT

2019/02/09 02:56

回答ありがとうございます！実はとても悩んでしまい、教えてくださったやり方を踏まえながら色々やってみた所、うまく乗せることができました！どちらも参考にさせていただいたので大感謝です\( ˆoˆ )/　ありがとうございます！自己解決法はまたあとで書きます

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

回答2件

構造的に考えるならfigure/figcaptionを利用してはいかがでしょうか？

HTML
1<style>
2figure{
3  display:inline-block;
4  position:relative;
5  margin:0px;
6}
7figcaption{
8  font-size:0.7em;
9  position:absolute;
10  bottom:20px;
11  left:0px;
12  color:#ffffff;
13  background:rgba(0,0,0,0.6);
14  width:100%;
15  max-width:w+px;
16  padding:1em 0px;
17  text-align:center;
18  }
19figcaption ul,figcaption li{
20  list-style:none;
21  padding:0px;
22  margin:0px;
23}
24</style>
25<figure>
26<img src="https://placehold.jp/ff0000/00ffff/150x150.png?text=1" class="alt_text" alt="あああ">
27<figcaption>
28<ul>
29<li>説明文書</li>
30<li>あああああああああ</li>
31<li>いいいい</li>
32</ul>
33</figcaption>
34</figure>
35<div class="myimage">
36

投稿2019/02/08 00:33

yambejp

総合スコア114814

EXIT

2019/02/09 02:48

遅くなってすみません。ありがとうございます！

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

無理やり感がありますがこういうことでしょうか？
sectionの数によっては削れるところ、調整しなきゃいけなくなるところがあります。

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width">
6  <title>sample</title>
7  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
8  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
9  <style>
10    #imagearea{
11      position: relative;
12      width:430px;
13      height:200px;
14      margin:0 auto;
15    }
16    #bgimg{
17      position: absolute;
18      text-align:center;
19      top: 0;
20      left: 50%;
21      -ms-transform: translate(-50%,0);
22      -webkit-transform : translate(-50%,0);
23      transform : translate(-50%,0);
24    }
25    #carousel{
26      position: absolute;
27      text-align:center;
28      width:430px;
29      top: 50%;
30      left: 50%;
31      -ms-transform: translate(-50%,-50%);
32      -webkit-transform : translate(-50%,-50%);
33      transform : translate(-50%,-50%);
34    }
35    #carousel section{
36      width:calc(100%/3);
37      bgcolor:#cf6;
38    }
39    #carousel img{
40      display:inline-block;
41    }
42    #carousel h1{
43      font-size:15px;
44    }
45    #carousel p{
46      font-size:12px;
47      line-height: 17px;
48    }
49    #carousel h1,#carousel p{
50      text-align:left;
51    }
52  </style>
53</head>
54<body>
55  <div id="imagearea">
56    <div id="bgimg">
57      <img src="http://placehold.jp/cccccc/ffffff/200x200.png?text=box">
58    </div>
59    <div id="carousel" class="your-class">
60      <section>
61       <img src="http://placehold.jp/eecccc/ffffff/100x100.png?text=1">
62       <h1>title1</h1>
63       <p>text1</p>
64      </section>
65      <section>
66       <img src="http://placehold.jp/cceecc/ffffff/100x100.png?text=2">
67       <h1>title2</h1>
68       <p>text2</p>
69      </section>
70      <section>
71       <img src="http://placehold.jp/ffccee/ffffff/100x100.png?text=3">
72       <h1>title3</h1>
73       <p>text3</p>
74      </section>
75    </div>
76  </div>
77  
78  <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
79  <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
80  <script type="text/javascript" src="slick/slick.min.js"></script>
81  <!-- ↓外部ファイルにして読み込ませてもいい -->
82  <script type="text/javascript">
83    $(document).ready(function(){
84      $('.your-class').slick({
85        infinite: true,
86        slidesToShow: 3,
87        slidesToScroll: 3
88      });
89    });
90  </script>
91</body>
92</html>