CSS jsで　transform:translateY();を使って、画像とtxtを重ねたい

前提・実現したいこと

調べつくしたが、表題のデザインができない。
目的: js (window<= 700px)の時にtrasnform:translateY(); で.jp-textを画像の上に表示させたい

発生している問題・エラーメッセージ

メソッドcssで、上記の動きを試みたができません。

試したこと

メソッドcssで、上記の動きを試みたができません。
調べたけど、ヒントになるサイトは出なかった。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4 <link rel="stylesheet" type="text/css" href="../css/destyle.css">
5<link rel="stylesheet" type="text/css" href="../Onsen/css/onsen.css">
6</head>
7<body>
8<main class="main">
9      
10        <div class="inner">
11            <section class="bread">
12                <div class="bread-inner">
13                    <div>
14                    <ol class="breadcrumbs" itemscope itemtype="https://schema.org/BreadcrumbList">
15                        <li itemprop=”itemListElement” itemscope itemtype=”https://schema.org/ListItem” class="bread-item"> 
16                            <a itemprop="item" href="index.html"> 
17                                <span itemprop="name">トップ</span>
18                            </a> 
19                            <meta itemprop="position" content="1" />
20                        </li><!-- /.bread-item -->
21                        <li itemprop=”itemListElement” itemscope itemtype=”https://schema.org/ListItem” class="bread-item">
22                            <a itemprop="item" href="onsen.html">
23                                <span itemprop="name">温泉</span>
24                            </a>
25                            <meta itemprop="position" content="2" />
26                        </li><!-- /.bread-item -->
27                    </ol><!-- /.breadcrumbs -->
28                </div>
29                </div><!-- /.bread-inner -->
30            </section><!-- /.bread -->
31
32            <div class="message">
33              <p>心。<br>
34               ただけます。<br>
35                心身共にリラックスできます。</p>  
36            </div><!-- /.message -->
37            <section class="onsen">
38                <div class="contents-inner">
39                    
40                    <ul class="onsen-list">
41                        <!-- 1 -->
42                        <li class="onsen-item">
43                            <div class="onsen-item-img onsen-contents-left aos-init aos-animate" data-aos="fade-up" data-aos-delay="100">
44                                <img src="../Onsen/img/onsen01.jpg" alt="温泉1"> 
45                            </div>
46                            <div class="onsen-item-txt onsen-item-txt-right aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">
47                                <div class="jp-text">
48                                    <p class="ttl">湯」</p><!-- /.ttl -->
49                                    <p class="desc1">よさ <br>
50                                       望みながら・・・</p>
51                                </div><!-- /.jp-text -->
52                            </div><!-- /.onsen-contents-right -->
53                        </li><!-- /.onsen-item -->
54                        <!-- 2 -->
55                        <li class="onsen-item">
56                            <div class="onsen-item-img onsen-contents-right aos-init aos-animate" data-aos="fade-up" data-aos-delay="100">
57                                <img src="../Onsen/img/onsen02.jpg" alt="温泉2">
58                            </div>
59                            <div class="onsen-item-txt onsen-item-txt-left aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">
60                                <div class="jp-text">
61                                    <p class="ttl">黄泉を</p><!-- /.ttl -->
62                                    <p class="desc1">ま硫酸塩泉を、<br>
63                                        たっぷりと掛け流しています。<br>
64                                        四季の移り変わりを、天然温泉の湯に浸りながら味わってください。</p>
65                                </div><!-- /.jp-text -->
66                            </div><!-- /.onsen-contents-right -->
67                        </li><!-- /.onsen-item -->
68                    </ul><!-- /.onsen-list -->
69                </div><!-- /.contents-inner -->
70                </section><!-- /.onsen-contents -->
71            
72        </div><!-- /.inner -->
73
74    </main><!-- /.main -->
75</body>
76</html>

CSS
1@charset "UTF-8";
2.body-wrapper {
3  overflow: hidden;
4}
5
6html {
7  font-size: 62.5%;
8}
9
10body {
11  font-size: 1.6rem;
12  color: #000000;
13}
14
15img {
16  width: 100%;
17  height: auto;
18  vertical-align: bottom;
19}
20
21a {
22  text-decoration: none;
23}
24
25li {
26  list-style: none;
27}
28
29.inner {
30  max-width: 1180px;
31  margin: 0 auto;
32}
33
34.wrapper {
35  width: 100%;
36  margin: 0 auto;
37}
38
39
40.contents-inner {
41  width: 1180px;
42  margin: 0 auto;
43}

main.css
1
2.onsen-list {
3  -webkit-box-pack: justify;
4  -webkit-justify-content: space-between;
5      -ms-flex-pack: justify;
6          justify-content: space-between;
7  margin-top: 80px;
8}
9
10@media screen and (max-width: 599px) {
11  .onsen-list {
12    display: -webkit-box;
13    display: -webkit-flex;
14    display: -ms-flexbox;
15    display: flex;
16    -webkit-box-orient: vertical;
17    -webkit-box-direction: normal;
18    -webkit-flex-direction: column;
19        -ms-flex-direction: column;
20            flex-direction: column;
21    -webkit-box-align: center;
22    -webkit-align-items: center;
23        -ms-flex-align: center;
24            align-items: center;
25  }
26}
27
28.onsen-item {
29  position: relative;
30  margin-bottom: 290px;
31}
32
33@media screen and (min-width: 600px) and (max-width: 1179px) {
34  .onsen-item {
35    display: -webkit-box;
36    display: -webkit-flex;
37    display: -ms-flexbox;
38    display: flex;
39    -webkit-box-orient: vertical;
40    -webkit-box-direction: normal;
41    -webkit-flex-direction: column;
42        -ms-flex-direction: column;
43            flex-direction: column;
44    -webkit-box-pack: center;
45    -webkit-justify-content: center;
46        -ms-flex-pack: center;
47            justify-content: center;
48    -webkit-box-align: center;
49    -webkit-align-items: center;
50        -ms-flex-align: center;
51            align-items: center;
52    margin-bottom: 550px;
53  }
54}
55
56.onsen-item:nth-of-type(2) {
57  position: relative;
58  margin-bottom: 290px;
59  display: -webkit-box;
60  display: -webkit-flex;
61  display: -ms-flexbox;
62  display: flex;
63  -webkit-box-orient: horizontal;
64  -webkit-box-direction: reverse;
65  -webkit-flex-direction: row-reverse;
66      -ms-flex-direction: row-reverse;
67          flex-direction: row-reverse;
68}
69
70@media screen and (min-width: 600px) and (max-width: 1179px) {
71  .onsen-item:nth-of-type(2) {
72    display: -webkit-box;
73    display: -webkit-flex;
74    display: -ms-flexbox;
75    display: flex;
76    -webkit-box-orient: vertical;
77    -webkit-box-direction: normal;
78    -webkit-flex-direction: column;
79        -ms-flex-direction: column;
80            flex-direction: column;
81    -webkit-box-pack: center;
82    -webkit-justify-content: center;
83        -ms-flex-pack: center;
84            justify-content: center;
85    -webkit-box-align: center;
86    -webkit-align-items: center;
87        -ms-flex-align: center;
88            align-items: center;
89    margin-bottom: 550px;
90  }
91}
92
93.onsen-item-img {
94  width: 525px;
95  height: 300px;
96}
97
98@media screen and (min-width: 600px) and (max-width: 1179px) {
99  .onsen-item-img {
100    margin-left: -350px;
101  }
102}
103
104.onsen-item-txt {
105  background-image: url(../../img/bg.png);
106  background-position: center;
107  background-size: cover;
108}
109
110@media screen and (min-width: 600px) and (max-width: 1179px) {
111  .onsen-item-txt {
112    width: 100%;
113  }
114}
115
116.onsen-item-txt-right {
117  position: absolute;
118  top: 50%;
119  right: 0;
120  -webkit-transform: translateY(-50%);
121          transform: translateY(-50%);
122  width: 810px;
123  height: 380px;
124  line-height: 1.5;
125  padding: 20px;
126  z-index: -2;
127}
128
129@media screen and (min-width: 600px) and (max-width: 1179px) {
130  .onsen-item-txt-right {
131    /*  position: absolute;
132                top: 50%;
133                left: 50%;
134                transform: translate(-50%, -50%); */
135    left: 0%;
136    margin-top: 300px;
137    margin-right: 450px;
138    -webkit-transform: translate(-50%, 50%);
139            transform: translate(-50%, 50%);
140  }
141}
142
143.onsen-item-txt-right .jp-text {
144  text-align: center;
145  position: relative;
146  top: 40%;
147  left: 50%;
148  -webkit-transform: translate(-40%, -50%);
149          transform: translate(-40%, -50%);
150}
151
152.onsen-item-txt-right .jp-text .ttl {
153  padding: 30px 0px 50px;
154  font-size: 2.4rem;
155}
156
157.onsen-item-txt-right .jp-text .desc1 {
158  line-height: 2.0;
159}
160
161.onsen-item-txt-left {
162  position: absolute;
163  top: 50%;
164  left: 0;
165  -webkit-transform: translateY(-50%);
166          transform: translateY(-50%);
167  width: 810px;
168  height: 380px;
169  line-height: 1.5;
170  padding: 20px;
171  z-index: -2;
172}
173
174.onsen-item-txt-left .jp-text {
175  text-align: center;
176  position: relative;
177  top: 40%;
178  left: 40%;
179  -webkit-transform: translate(-40%, -50%);
180          transform: translate(-40%, -50%);
181}
182
183.onsen-item-txt-left .jp-text .ttl {
184  padding: 30px 0px 50px;
185  font-size: 2.4rem;
186}
187
188.onsen-item-txt-left .jp-text .desc1 {
189  line-height: 2.0;
190}
191
192@media screen and (min-width: 600px) and (max-width: 1179px) {
193  .onsen-item-txt-left {
194    /*  position: absolute;
195                 top: 50%;
196                 left: 50%;
197                 transform: translate(-50%, -50%); */
198    margin-top: 200px;
199    margin-right: 450px;
200  }
201}

js
1 $(function(){
2  var winW = $(window).width();
3  var devW = 700;
4      if(winW<=derW) {
5        $(".onsen-item-txt").css('transform', 'translateY()');
6      }
7 });

補足情報（FW/ツールのバージョンなど）

yambejp

2021/12/02 07:59

画像がどうなっているかわからないのでなんとも言えないですね imgにheight/width/altを書いて位置を確定できませんか？

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

回答1件

ベストアンサー

typoでは？

js
1  var devW = 700;
2//      if(winW<=derW) {
3      if(winW<=devW) {

投稿2021/12/03 04:21

Lhankor_Mhy

総合スコア36074

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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