jS,CSSを使って、画像をFadeInさせながら、textも切り替えるようなサイトを作りたい

前提・実現したいこと

表題の通り、こちらのようなサイトを作成しようと考えています。

なお、今回はdemosite1のimgのみの大きさだけ調節させたいです。
画像は下記に記します
※frontでは、紫色で囲った画像をきちんと表示させたい。

イメージ図

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

試したこと

上記のサイトを参考にして、手を動かしながら行っていましたが、どうもいうまくいきません。
より詳細に行ったことは
画像がわかりやすく、表示できるように縮小させながら表示させました。→×

・cont_text_imgやfrontのwidth などを調整させましたが、、きちんと表示されない。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4	<meta charset="UTF-8">
5	<meta content="IE=edge" http-equiv="X-UA-Compatible">
6	<meta content="width=device-width, initial-scale=1.0" name="viewport">
7	<title></title>
8	<link href="./style.css" rel="stylesheet">
9</head>
10<body>
11	<div class="cont_principal">
12		<div class="cont_text_img">
13			<div class="cont_img_back"><img alt="" class='img_1' src="./img/works/demosite1.png" style="min-width: 20%;"> <img alt="" class='img_2' src="./img/works/works_demosite2.png"> <img alt="" class='img_3' src="./img/works/demosite3png.png"></div><!-- /.cont_img_back-->
14			<div class="cont_text">
15				<h1>San Francisco</h1>
16				<p>San Francisco, officially the City and County of San Francisco, is the cultural, commercial, and financial center of Northern California and the only consolidated city-county in California. San Francisco encompasses a land area of about 46.9 square miles (121 km2) on the northern end of the San Francisco Peninsula, which makes it the smallest county in the state.</p><button class="btn_read_m">READ MORE</button>
17				<div class="cont_icon_like">
18					<p><i class="material-icons">&#xE87E;</i><span>288</span></p>
19				</div><!-- /.cont_icon_like -->
20			</div><!-- /.cont_text -->
21			<div class="cont_img_front">
22				<img alt="" class='img_1' src="./img/works/demosite1_expansion2.png" style="min-width: 20%;"> <img alt="" class='img_2' src="./img/works/works_demosite2.png"> <img alt="" class='img_3' src="./img/works/demosite3png.png">
23				<div class="cont_icons_img_from">
24					<ul>
25						<!-- <li><i class="material-icons">&#xE8AE;</i>
26                    </li> -->
27						<!-- <li>
28                    <i class="material-icons">&#xE55B;</i>
29                    </li> -->
30						<!-- <li><i class="material-icons">&#xE410;</i></li> -->
31					</ul>
32				</div><!-- /.cont_icons_img_from -->
33			</div><!-- /.cont_img_front -->
34		</div><!-- /.cont_text_img -->
35	</div><!-- /.cont_principal-->
36	<script src="./js/jquery-3.6.0.min.js">
37	</script> 
38	<script src="./js/script.js">
39	</script>
40</body>
41</html>

CSS
1@charset "utf-8";
2
3/*========= レイアウトのためのCSS ===============*/
4* {   
5  margin:0px auto;
6  padding:0px;
7  text-align: center;
8}
9
10.cont_principal {
11  position:absolute;
12  height: 100%;
13  width: 100%;
14/* background-color: #90A4AE; */
15}
16
17.cont_text_img {
18  position: relative;
19  top:50%;
20  margin-top:-175px;
21  width: 700px;
22  height: 350px;;
23  background-color:#fff;  
24box-shadow:0px 10px 25px -5px rgba(0,0,0,0.25);
25}
26.cont_text {
27  position:relative;
28  float: left;
29  width: 50%;
30  height:80%;
31  margin:5%;
32  text-align:justify;
33}
34
35.cont_text_img_act > .cont_text > * {
36  opacity:1;
37  left: 0px;
38}
39
40.cont_text > h1 {
41 font-family: 'Open Sans', sans-serif; 
42font-weight: 100;
43margin-bottom:20px;
44-webkit-transition: all 0.5s;
45-o-transition: all 0.5s;
46transition: all 0.5s;
47  -webkit-transition-delay: 1.2s; /* Safari */
48    transition-delay: 1.2s;
49opacity:0;
50  position: relative;
51  left: -50px;
52}
53
54.cont_text > p {
55  font-family: 'Open Sans', sans-serif;
56font-size:14px;
57margin-bottom:20px;
58font-weight: 300;
59-webkit-transition: all 0.5s;
60-o-transition: all 0.5s;
61transition: all 0.5s;
62  -webkit-transition-delay: 1.4s; /* Safari */
63    transition-delay: 1.4s;
64opacity:0;
65  position: relative;
66  left: -50px;
67}
68
69.cont_icon_like {
70  position:relative;
71  float:right;
72  width:70px;
73margin-top:10px;
74-webkit-transition: all 0.5s;
75-o-transition: all 0.5s;
76transition: all 0.5s;
77  -webkit-transition-delay: 1.5s; /* Safari */
78    transition-delay: 1.5s;
79opacity:0;
80  position: relative;
81  left: -50px;
82}
83.cont_icon_like > p > i {
84  color:#999;  
85    cursor:pointer;
86}
87
88.cont_icon_like > p > span {
89font-family: 'Open Sans';
90  position: relative;
91  top:-5px;
92  left:5px;
93  color:#666;
94}
95
96.btn_read_m {
97  position:relative;
98  float: left;
99  padding:10px;
100  border:none;
101  background-color:#495FE9;
102  color:#fff;
103  margin:10px 0;  
104  box-shadow:1px 2px 10px 0px rgba(0,0,0,0.3);
105  font-size:11px;
106-webkit-transition: all 0.5s;
107-o-transition: all 0.5s;
108transition: all 0.5s;
109  -webkit-transition-delay: 1.6s; /* Safari */
110    transition-delay: 1.6s;
111opacity:0;
112  position: relative;
113  left: -50px;
114
115}
116
117.cont_img_front {
118 
119  position:relative;
120  float: left;
121  width: 35%;
122  background: #eee;
123  height:100%;
124  margin-right:5%;  
125   overflow:hidden;
126top:0;
127}
128
129.cont_img_front_active {
130   padding: 25px 0px;
131 top:-25px;
132  box-shadow:1px 1px 20px 0px rgba(0,0,0,0.3);
133-webkit-transition: all 0.5s;
134-o-transition: all 0.5s;
135transition: all 0.5s;
136 }
137
138.cont_img_front > img {
139  top:-25px;
140  position:relative;
141  left:-420px;
142-webkit-transition: all 0.5s;
143-o-transition: all 0.5s;
144transition: all 0.5s;
145
146}
147
148.cont_img_back {      
149  position:absolute;
150  width: 100%;
151  height: 100%;
152  overflow:hidden;
153}
154
155.cont_img_back > img {
156  top:-25px;
157  position:relative;
158  -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
159  filter: grayscale(100%);
160  opacity:0.2;
161-webkit-transition: all 0.5s;
162-o-transition: all 0.5s;
163transition: all 0.5s;
164
165
166}
167
168.img_2{
169  opacity:0;
170    display:none;
171
172}
173
174.img_d_n {
175  display:none;
176}
177
178.img_d_b {
179  display:block;
180    -webkit-animation-name: escala_imagen; /* Chrome, Safari, Opera */
181    -webkit-animation-duration: 10s; /* Chrome, Safari, Opera */
182  animation-name: escala_imagen;
183    animation-duration: 10s;
184}
185.cont_img_front:hover >.cont_icons_img_from {
186bottom:0px;  
187}
188.cont_icons_img_from {
189  position:absolute;
190  bottom:-100px;
191-webkit-transition: all 0.5s;
192-o-transition: all 0.5s;
193transition: all 0.5s;
194
195  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f24f5a+0,ffffff+78&1+0,0+78 */
196background: -moz-linear-gradient(bottom,  rgba(242,79,90,0.5) 0%, rgba(255,255,255,0) 85%); /* FF3.6-15 */
197background: -webkit-linear-gradient(bottom,  rgba(242,79,90,0.5) 0%,rgba(255,255,255,0) 85%); /* Chrome10-25,Safari5.1-6 */
198background: linear-gradient(bottom,  rgba(242,79,90,0.5) 0%,rgba(255,255,255,0) 85%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
199filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f24f5a', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
200
201  height: 70px;
202  width:100%;
203}
204 
205.cont_icons_img_from > ul > li {
206  position:relative;
207  float:left;
208  width:33.33%;
209}
210.cont_icons_img_from > ul {
211  margin-top:20px;
212}
213
214.cont_icons_img_from > ul > li {
215  list-style:none;
216}
217.cont_icons_img_from > ul > li > i {
218margin-left:20px;
219  text-align:center;
220font-size:32px;
221color:#fff;
222    cursor:pointer;
223}
224
225@-webkit-keyframes escala_imagen {
226  from { 
227
228transform: scale(1);
229
230  }
231  to { 
232
233transform: scale(1.5);
234  }
235}
236@-o-keyframes identifier {
237  from { 
238
239transform: scale(1);
240
241  }
242  to { 
243
244transform: scale(1.5);
245  }
246}
247transform: scale(1);
248
249  }
250  to { 
251  -webkit-transform: scale(1.5);
252-moz-transform: scale(1.5);
253-ms-transform: scale(1.5);
254-o-transform: scale(1.5);
255transform: scale(1.5);
256  }
257}
258@keyframes identifier {
259  from { 
260-webkit-transform: scale(1);
261-moz-transform: scale(1);
262-ms-transform: scale(1);
263-o-transform: scale(1);
264transform: scale(1);
265
266  }
267  to { 
268  -webkit-transform: scale(1.5);
269-moz-transform: scale(1.5);
270-ms-transform: scale(1.5);
271-o-transform: scale(1.5);
272transform: scale(1.5);
273  }
274}

JS
1/*
2-------------------------------------
3------------------------------------- The image changue  every 10 Secons
4-------------------------------------
5-------------------------------------
6*/
7
8var Cont = 0;
9function inic(){
10if(Cont % 2 != 0){
11  document.querySelector('.img_1').style.opacity = '0';
12  document.querySelectorAll('.img_1')[1].style.opacity = '0';
13
14setTimeout(function (){
15document.querySelector('.img_1').className = 'img_1 img_d_n';
16    document.querySelectorAll('.img_1')[1].className = 'img_1 img_d_n';
17
18  document.querySelector('.img_2').className = 'img_2 img_d_b';
19
20  document.querySelectorAll('.img_2')[1].className = 'img_2 img_d_b';
21  
22},500);  
23  setTimeout(function (){
24document.querySelector('.img_2').style.opacity = '0.2';  
25  document.querySelectorAll('.img_2')[1].style.opacity = '1';
26 
27  },600);
28    Cont++;
29}else{
30
31  document.querySelector('.img_2').style.opacity = '0';
32  document.querySelectorAll('.img_2')[1].style.opacity = '0';
33
34setTimeout(function (){
35
36  document.querySelector('.img_2').className = 'img_2 img_d_n';
37  document.querySelectorAll('.img_2')[1].className = 'img_2 img_d_n';
38
39  document.querySelector('.img_1').className = 'img_1 img_d_b';
40  document.querySelectorAll('.img_1')[1].className = 'img_1 img_d_b';
41
42},500);  
43  
44  setTimeout(function (){
45document.querySelector('.img_1').style.opacity = '0.2';
46document.querySelectorAll('.img_1')[1].style.opacity = '1';
47  },600);  
48  Cont++;
49}   }
50
51window.onload = function (){  
52  inic();  document.querySelector('.cont_text_img').className = "cont_text_img cont_text_img_act";
53setTimeout(function(){
54  document.querySelector('.cont_img_frond').className = "cont_img_frond  cont_img_frond_active";
55},1700);
56  
57  
58}
59
60setInterval(function(){ inic() }, 10000);
61