title: Hide image caption on hover and show overlay text
body: <p>Hide image caption on hover and show overlay text: I have image which has title(caption) on it. What I'm trying to do now is when I hover over the image to remove the title and show other text (description). </p>
  
  <p>The problem is that the title is hidden but also the other text. </p>
  
  <p>Can someone point me where I'm wrong here?</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-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
    $('.overlay').hide();
    $('.section-solution').hover(
      function() {
        $('.hide-on-hover').hide();
        $('.text').show();
      },
  
      function() {
        $('.hide-on-hover').show();
        $('.text').hide();
      }
    );
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container-img {
    position: relative;
    padding: 20px;
  }
  
  .wp-caption {
    position: relative;
    padding: 0;
    margin: 0;
  }
  
  .fullwidth-img img {
    margin-bottom: 70px;
    width: 100%;
    height: 400px;
    object-fit: cover;
  }
  
  .wp-caption img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  
  .wp-caption-text {
    display: block;
    position: absolute;
    width: 100%;
    color: #fff;
    left: 0;
    bottom: 0;
    padding: 4em;
    font-weight: 700;
    z-index: 2;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .wp-caption-text p {
    color: white;
    font-size: 26px;
    font-weight: 500;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: black;
    color: white;
    font-size: 20px;
    padding: 2em;
  }
  
  .container-img:hover .overlay {
    opacity: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;section class="section-solution "&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="container-img fullwidth-img" id="last"&gt;
          &lt;figure class="wp-caption"&gt;
            &lt;div class="demo"&gt;
              &lt;img width="300" height="200" src="https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzEwMC8zNDkvb3JpZ2luYWwvc2liZXJpYW4tdGlnZXIuanBn"&gt;
            &lt;/div&gt;
            &lt;div class="overlay"&gt;
              &lt;div class="text"&gt;
                &lt;figcaption class="wp-caption-text on-hover"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/figcaption&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;figcaption class="wp-caption-text"&gt;
              &lt;p class="hide-on-hover"&gt;
                Lorem ipsum
              &lt;/p&gt;
            &lt;/figcaption&gt;
          &lt;/figure&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The fiddle
  <a href="https://jsfiddle.net/98j07g4k/1/" rel="nofollow noreferrer">https://jsfiddle.net/98j07g4k/1/</a></p>