Add overlay text on hover for every specific team member - php

Question

I have a created a custom post type with team members and I want to hover on one member and show the overlay-text for that member, then over on the next member show the overlay text for the next member and so on.
Right now when I hover over a random team member it shows all the "overlay-text" divs :
Here is my code:
<?php
$loop = new WP_Query( array( 'post_type' => 'team', 'orderby'=>'post_id', 'order'=>'ASC' ) );
if($loop->have_posts() ) :
while($loop->have_posts() ) : $loop->the_post(); ?>
<div class="col-sm-4">
<div class="team-member">
<div class="member-img">
<?php the_post_thumbnail(); ?>
</div>
<h4><?php the_title(); ?></h4>
<?php the_content(); ?>
<div class="overlay-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem maxime id accusantium voluptates. Assumenda, maiores illum nemo aspernatur pariatur. Magnam nihil, enim rerum cupiditate reprehenderit animi dolorum eveniet, voluptas explicabo.</p>
</div>
</div>
</div>
<?php endwhile;
endif;
?>
I know the overlay-text paragraph is hard coded I am trying to find a solution to this also.
CSS for overlay-text:
.team-member .overlay-text {
opacity: 0;
visibility: hidden;
background: rgba(15, 175, 151, 0.95) none repeat scroll 0 0;
color: #fff;
bottom: 0;
left: 15px;
padding: 15px;
position: absolute;
right: 15px;
top: 0;
transition: all 0.5s ease-in-out 0s;
}
.team-member .overlay-text.active {
opacity: 1;
visibility: visible;
}
Javascript for overlay text:
function showOverlay() {
jQuery('.team-member').hover(function(){
jQuery('.overlay-text').addClass('active');
},
function(){
jQuery('.overlay-text').removeClass('active');
});
}

Answer 1

you need this so it only adds the class to that specific one
JS:
function showOverlay() {
$('.team-member').on('mouseenter',function(){
$(this).find('.overlay-text').addClass('active');
}).on('mouseleave',function(){
$(this).find('.overlay-text').removeClass('active');
});
}