How to change the background when you hover over a button

How to change the background when you hover over a button

Hi everyone,

I am new to jQuery and I try to accomplish the following hover effect as used on http://designfilmfestival.com/2015/ (notice when you hover over a button the background changes)
 
The goal: When you hover over a specific button, the background should change to a new specific background. When you do not hover over a button ('standard') it should also change the background but slowly. There should be a smooth transition between each background change (Fade-in & Fade-out).

How?
I have created specific backgrounds (via classes in css) for each specific button. These buttons (class= '.normalButton') are placed below each others (vertically, just like the example) inside the div (standard class= .normalBackground) where the background is placed and replaced. 

Also I try to find a way to incorporate all the different classes into 1 piece of jQuery code, so I don't have to repeat the code with each new button. (see my jQuery & CSS below)

I would very much appreciate your help.

Thanks

---------------------------
My jQuery code so far (based on an online example):

<script>
                                                                                                                   /*when document is loaded */
$(document).ready(function(){
$('.normalButton').hover(function () {          /*if hover over a button, change into new background */
        $('.normalBackground').addClass('hoverNewBackground');
    }, function () {
        $('.normalBackground-change').removeClass('hoverNewBackground');
    });
}
  </script>

CSS:
.normalButton{
width:100px;
height:50px;
}

.normalBackground{
height:100%;
width:100%;
background: url('path/image.jpg')
}

.hoverNewBackground {
    height:100%;
width:100%;
background: url('path/new-image.jpg') !important;
}

.hoverNewBackground-2 {
    height:100%;
width:100%;
background: url('path/new-image2.jpg') !important;
}