HTML,CSS,javascriptを使ってふわっと出力する表現がしたい。

実現したいこと

現在初心者ながらwebサイトを作成しています。
webページのheaderの部分でロゴが出てきた後にメインの写真がふわっと出てくるような表現をしたいのですがうまくいきません。

試したこと

html
1~省略〜
2<body>
3  <header>    
4    <div class="container">
5        <div class="row">
6          <div class="col span-12 header" style="padding: 20px;">
7            <h1><a href=""> <img src="{% static 'img/logo.png' %}" alt="ロゴ" class="logo"></a></h1>
8            <div class="header-box"><a href=""><span class="contact-button">お問い合わせ</span></a></div>
9          </div>
10        </div>
11      </header>
12      
13      <div class="mainimg">
14        <img src="{% static 'img/header.jpg' %}" alt="メイン画像" class='imgs'>  
15      </div>

css
1.logo,.mainimg img {
2    opacity: 0;
3    transition: opacity 1s ease-in-out;
4}
5
6.fade-in {
7    opacity: 1;
8}

javascript
1window.addEventListener('load', function() {
2  var logo = document.querySelector('.logo');
3  var mainImg = document.querySelector('.imgs');
4
5  setTimeout(function() {
6    logo.classList.add('fade-in');
7    setTimeout(function() {
8      mainImg.classList.add('fade-in');
9    }, 1000); // ロゴの表示後、1秒の遅延時間
10  }, 1000); // メイン画像の表示を1秒遅延させる
11});