title: Change background img on hover with fade effect HTML CSS
body: <p>I want to set two background images to div and then make them changing while hovering with fade effect like this.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.kid {
   max-width:50%;
   position:relative;
  }
  
  .kid img {
   display:block;
   opacity:1;
   height: auto;
   transition:.6s ease;
   width:100%;
   position:absolute;
   z-index:12;
  }
  .kid img:hover {
   opacity:0;
  }
  .kid img + img {
   display:block;
   opacity:1;
   position:relative;
   z-index:10;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="kid"&gt;
  
  &lt;img src="https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg" alt="Kid" itemprop="image" width="600" height="750" /&gt;
  
  &lt;img src="https://cdn.pixabay.com/photo/2020/02/04/16/14/leaves-4818626_960_720.jpg" alt="Adult" width="600" height="750" /&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here it's done by putting image  in html code. I have to do this in css as background-image, because I made two column grid gallery (50% width and 100vh) and it doesn't works with <code>&lt;img&gt;</code>.</p>
  
  <p>Here is my code. Help me to get the same effect like in first fiddle.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
    margin: 0 auto;
    width: 100%;
    height: 100vh
  }
  .left{
    float: left;
  }
  .right{
    float: right
  }
  
  .col-half-width{
    width: 50%;
    height: 100vh;
  }
  
  .project-01{
    background: #ccc url('https://cdn.pixabay.com/photo/2017/12/16/16/37/mountain-3022908_960_720.jpg') no-repeat center center;
    background-size: cover;
  
    }
  
  .project-02{
    background: url('https://cdn.pixabay.com/photo/2020/02/04/16/14/leaves-4818626_960_720.jpg') no-repeat center center;
    background-size: cover;
  }
  .project-01,
  .project-02 img{
    max-width:100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-half-width left project-01"&gt;&lt;/div&gt;
  &lt;div class="col-half-width right project-02"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>