Images placed in sidebar not correct size in Firefox

I’ve created my own fading social media buttons for my blog and placed them in the sidebar. Their original size is 59×59 but I’ve decided to resize the image to 33×33. The buttons are supposed to be at 25% opacity and fade in to 90% opacity when you hover over it, remaining the same size throughout.

When I use Firefox (my primary browser of choice), I’ve noticed that the inactive images(meaning nothing hovering over them) they are slightly larger than 33×33. Then when I hover over them, they will adjust to the correct 33×33 and perform the fade that I coded it for. And when I hover off of it, it will fade back to 25% and then get slightly larger again. I would like it to be a smooth fade without any weird sizing adjustments.

I’ve tested this in Internet Explorer and on my mobile phone. The images are the correct size and fade correctly when I hover over them in other browsers. Simple width size HTML was added to the <img > to make it 33×33. And CSS coding was created to make it to fade.

I’m not sure what is causing this. Can someone help me out? Thanks.

The website is: https://www.shanibums.com/

[ No bumping please. ]