Assuming the background for your footer is the whole image behind your buttons on your PSD, you could just crop your buttons out to the size of your button with the hover effect.
So turn your hover effect on and crop out the button to include your hover effect and save the image as your hover img. Then turn your hover effect off and make the background transparent and save that as your regular button image (will need to be saved as a png). So both your hover img and your regular button img will be the same size. Then just use the JS to swap the img out on hover.
As far as position them on the page, use margin/padding to position the buttons where you want.
I find it easier to put each button in it’s own div and then position the divs first and then position the button inside each div. Some would call that bad practice because you are adding divs just for position reasons but to each there own. You could try using pseudo classes. Chris did a great tutorial.