Hide text on hover

Question

I'm unable to hide the class "portfolio_caption" when the hover effect happens. I'm not sure if it's because the hover effect is based on opacity. I'm a little lost as to how to make this happen.

Kindly note that this is a pure CSS code but I don't mind using jQuery/Javascript if needed be.

Here's the JSFiddle

.portfolio_bg {
      position: relative;
      width: 50%;
    }
    
    .portfolio_image {
      display: block;
      width: 100%;
      height: auto;
    }
    
    .portfolio_overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .5s ease;
      background-color: rgba(104, 120, 129, 0.5);
    }
    
    .portfolio_bg:hover .portfolio_overlay {
      opacity: 1;
    }
    
    .portfolio_caption {
      color: white;
      font-size: 20px;
      position: absolute;
      bottom: 10%;
      left: 10%;
    }
    .portfolio_caption:hover {
      opacity: 0;
      display: none;
    }
    
    .portfolio_text {
      color: white;
      font-size: 20px;
      position: absolute;
      bottom: 10%;
      left: 10%;
    }

    <a href="#">
    <div class="portfolio_bg">
      <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="portfolio_image">
      <div class="portfolio_caption">This is the text that I want to hide when the mouse is hovered but it doesn't go away!</div>
      <div class="portfolio_overlay">
        <div class="portfolio_text">Hello World and the whole kind of thing goes down!</div>
      </div>
    </div>
    </a>

Answer 1

You need to use the hover of the container that is .portfolio_bg

If you use this it works,

.portfolio_bg:hover  .portfolio_caption 
{
  opacity: 0;
}