Hide image caption on hover and show overlay text

Question

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).

The problem is that the title is hidden but also the other text.

Can someone point me where I'm wrong here?

$(document).ready(function() {

  $('.overlay').hide();
  $('.section-solution').hover(
    function() {
      $('.hide-on-hover').hide();
      $('.text').show();
    },

    function() {
      $('.hide-on-hover').show();
      $('.text').hide();
    }
  );

});

.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section class="section-solution ">
  <div class="container">
    <div class="row">
      <div class="container-img fullwidth-img" id="last">
        <figure class="wp-caption">
          <div class="demo">
            <img width="300" height="200" src="https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzEwMC8zNDkvb3JpZ2luYWwvc2liZXJpYW4tdGlnZXIuanBn">
          </div>
          <div class="overlay">
            <div class="text">
              <figcaption class="wp-caption-text on-hover">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</figcaption>
            </div>
          </div>
          <figcaption class="wp-caption-text">
            <p class="hide-on-hover">
              Lorem ipsum
            </p>
          </figcaption>
        </figure>
      </div>

    </div>
  </div>

</section>

The fiddle https://jsfiddle.net/98j07g4k/1/

Answer 1

Swap your javascript file for this and I'll add comments in the code for understanding.

  $(document).ready(function() {

        var trade = true; // variable that controls whether the mouse was on 
                          // top of the image and left.

        $('.overlay').hide();
            $('.section-solution').hover(
                function () {
                    if(trade) {
                      $('.hide-on-hover').html("test");
                      $('.text').show();
                      trade = false;
                    } else {
                        // Here I set new text that can be any text just 
                        // need pass to html.
                        $('.hide-on-hover').html("Lorem ipsum");
                      trade = true;
                    }
                }
            );

         });

Answer 2

Another possible way is to hide the title through the CSS. You can remove the JS part also. Simply target class hide-on-hover in your CSS and add display: none;

Here is how would look like

.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;
}

.container-img:hover .hide-on-hover {
  display: none;
}

<section class="section-solution ">
<div class="container">
    <div class="row">
                    <div class="container-img fullwidth-img" id="last">
                        <figure class="wp-caption">
                            <div class="demo">
                                <img width="300" height="200" src="https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzEwMC8zNDkvb3JpZ2luYWwvc2liZXJpYW4tdGlnZXIuanBn">
                            </div>
                            <div class="overlay">
                              <div class="text"><figcaption class="wp-caption-text on-hover"><p class="show_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></figcaption></div>
                            </div>                            
                            <figcaption class="wp-caption-text">
                              <p class="hide-on-hover">
                              Lorem ipsum
                              </p>
                            </figcaption>
                        </figure>
                    </div>                    
                       
</div>
</div>

</section>

Probably the simplest and fastest way which I can think of.

Answer 3

Remove $('.overlay').hide(); from the code it will work.

$(document).ready(function() {

  
  $('.section-solution').hover(
    function() {
      $('.hide-on-hover').hide();
      $('.show_text').show();
    },

    function() {
      $('.hide-on-hover').show();
      $('.show_text').hide();
    }
  );

});

.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;
}

<section class="section-solution ">
<div class="container">
    <div class="row">
                    <div class="container-img fullwidth-img" id="last">
                        <figure class="wp-caption">
                            <div class="demo">
                                <img width="300" height="200" src="https://img.purch.com/w/660/aHR0cDovL3d3dy5saXZlc2NpZW5jZS5jb20vaW1hZ2VzL2kvMDAwLzEwMC8zNDkvb3JpZ2luYWwvc2liZXJpYW4tdGlnZXIuanBn">
                            </div>
                            <div class="overlay">
                              <div class="text"><figcaption class="wp-caption-text on-hover"><p class="show_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></figcaption></div>
                            </div>                            
                            <figcaption class="wp-caption-text">
                              <p class="hide-on-hover">
                              Lorem ipsum
                              </p>
                            </figcaption>
                        </figure>
                    </div>                    
                       
</div>
</div>

</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>