Working hover on other element

Question

I have a little problem with my overlay hover. It's not working well, because when i hover on .portfolio-project (text-layer) the hover on .portfolio-overlay is turning of. It's obvious but how to make it work together?

#portfolio .portfolio-grid {
  padding: 0px;
}

#portfolio .portfolio-project-name {
  position: relative;
  background-image: url('https://s16.postimg.org/5pfokew6t/GMZlk_Sr.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 550px;
  transition: ease-in .2s;
}

#portfolio .portfolio-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(222, 39, 94, 0.0);
  z-index: 1;
  transition: ease-in .3s;
}

#portfolio .portfolio-overlay:hover {
  background-color: rgba(222, 39, 94, 0.8);
}

#portfolio .portfolio-project {
  z-index: 1;
  position: absolute;
  left: 15%;
  top: 30%;
  max-width: 70%;
  text-align: center;
  color: #fff;

  p {
    margin-top: 20px;
  }
  i {
    margin-top: 20px;
    font-size: 40px;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="sass/main.min.css">
<script src="https://use.fontawesome.com/ca1269ff60.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>		

<section id="portfolio">
  <div class="container-fluid portfolio-container">
    <div class="row">
          
      <a href="#" target="_blank">
        <div class="portfolio-grid col-xs-12 col-md-4">
          <div class="portfolio-overlay"></div>
          <div class="portfolio-project-name">
            <div class="portfolio-project">
              <h2>Project Name</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis dui non tortor gravida porta at imperdiet nibh. Ut finibus sapien vel nibh porta lacinia.</p>
              <i class="fa fa-angle-double-right" aria-hidden="true"></i>
            </div>
          </div>
        </div>
      </a>
					
  </div>
</section>

Answer 1

add the class:

.portfolio-project {
  pointer-events:none;
}

Answer 2

You can add pointer-events: none; to your #portfolio .portfolio-project rules

#portfolio .portfolio-grid {
  padding: 0px;
}

#portfolio .portfolio-project-name {
  position: relative;
  background-image: url('https://s16.postimg.org/5pfokew6t/GMZlk_Sr.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 550px;
  transition: ease-in .2s;
}

#portfolio .portfolio-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(222, 39, 94, 0.0);
  z-index: 1;
  transition: ease-in .3s;
}

#portfolio .portfolio-overlay:hover {
  background-color: rgba(222, 39, 94, 0.8);
}

#portfolio .portfolio-project {
  z-index: 1;
  position: absolute;
  left: 15%;
  top: 30%;
  max-width: 70%;
  text-align: center;
  color: #fff;
  pointer-events:none;

  p {
    margin-top: 20px;
  }
  i {
    margin-top: 20px;
    font-size: 40px;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="sass/main.min.css">
<script src="https://use.fontawesome.com/ca1269ff60.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>		

<section id="portfolio">
  <div class="container-fluid portfolio-container">
    <div class="row">
          
      <a href="#" target="_blank">
        <div class="portfolio-grid col-xs-12 col-md-4">
          <div class="portfolio-overlay"></div>
          <div class="portfolio-project-name">
            <div class="portfolio-project">
              <h2>Project Name</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis dui non tortor gravida porta at imperdiet nibh. Ut finibus sapien vel nibh porta lacinia.</p>
              <i class="fa fa-angle-double-right" aria-hidden="true"></i>
            </div>
          </div>
        </div>
      </a>
					
  </div>
</section>

Answer 3

You need to wrap .portfolio-project-name into .portfolio-overlay. It has to be a child of the element you are hovering over.