Change multiple div's on hover another div

I've found a lot of similar problems, but none with a solution for mine.

I've got 3 images displayed next to each other. The images are background-image with css. I explain why later:

<div class="team-photo-container">

<div class="team-photo-wrapper">

    <div class="team-photo david"></div>

    <div class="team-photo charlotte"></div>

    <div class="team-photo timon"></div>

</div>

When I hover over the first image (.david) I want the background-image of the other two (.charlotte and .timon) to change. I got this to work with this:

.charlotte:hover ~ .david {
background-image: url(../../images/basic-david-right.jpg) !Important;
}

.charlotte:hover ~ .timon {
    background-image: url(../../images/basic-timon-left.jpg) !Important;    
}

NOW MY PROBLEM:

I want the same to happen to the other images. So when I hover on .charlotte I want the background image for .david and .timon to change. BUT it only changes .timon. When I try the hover code on .timon, neither one change...

I think the code doesn't work when the div is in front of the hover div...

I hope you guys understand my question! Sorry for pour English, I'm Dutch.

David