change jquery img src on hover makes images move downwards [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.

Closed 9 years ago.

Improve this question

I have made a div which contains images, each within their own div, linked to different social media websites at the top of my webpage. I am using jquery to change the img src on hover and then return to the original image. The images are all 24x24px and the container is 24px high. There are still compatibility issues with firefox but I'm not so worried about them at the moment. The problem I'm having is that when I move the mouse over an image, everything changes and changes back perfectly, but the image lowers itself a pixel or two and cuts off at the bottom. The outer two images don't move when I hover, it's just the ones in the middle.

The site can be found here:

http://tfsm.org/flagshiptest/

Answer 1

The problem is in your images. For example the YouTube one, the "On" state has a small gap on the top. That's happening in your other links too.