Hi, I'm pretty new to CSS though I do have a firm grasp of it all. I recently tried my hand at making a social media menu using sprites to display the icons and their hover states.
The menu works exactly as I want whereby the Hover state moves into place correctly, although in Opera there is a problem.
On hover the bottom half of the icon image changes to the hover state while the top does not. it is as though the hover state is just half the icon it should be and then is being overlaid onto the non-hovered version of the icon. seeing as this works perfectly fine on all other browsers I have tried I am not at all sure what to think. the page is very simple not much could be conflicting and im not sure what would even make it act in such a way if I were to try to emulate the effect.

Anyway I was just hoping to learn something about CSS from the educated people on this site, and perhaps a fix, vendor prefix? I don't know.

All help will be much appreciated.

(edit)
Also one of the icons has a slightly different issue, before hover the top half looks hovered, on hover the bottom half becomes the intended hover state and so the whole icon looks correct. its basically doing the same thing on hover that all the icons do but it starts out with the top half of the hover sprite in place already.