Trying to change roll over image

I have a template I’m using to create my own website.
on the site i have a team page, and currently when i hover over the team images i get a semi-transparent grey box, with text and info about that team member.

What I’m trying to do is make it so when you hover over the team member the semi transparent grey background is now replaced with a whole new image of that team member.

I’ve managed using chrome inspect element tool and change the code from:

.w-team-member-meta {
text-align: center;
padding: 6%;
background-color: rgba(0,0,0,0.75);
}

to:

.w-team-member-meta {
text-align: center;
/* padding: 6%; */
background-image: url(“https://dev.freshcutmedia.com/wp-content/uploads/2015/07/Jamie_Paint1.jpg”);
}

but this makes every team member have the same background image when i hover over them. i want to be able to choose a different image for each person.

Does anyone know how id be able to do this?

would really appreciate any help or atlas point me in the right direction.

Thanks.