hoverでfadeInさせると1pxずれる現象の対策です(ちなみにChromeでした)。hoverすると1pxずれる現象自体は割とよくあるみたいで、ブラウザによって対処方法が違います。 Chromeの場合 display: inline-block; を使う 要素に display: inline-block; の記述を追加したら、マウスオーバー時にズレが発生しなくなります。 backface-visibility: hidden; を使う 要素に backface-visibility: hidden; の記述を追加します。 参考:【CSS】transitionプロパティ使用時に、Chromeブラウザで1pxずれる現象を回避する) Firefoxの場合 backgroundの指定を追記 以下を追記