The issue i'm having is when you first go onto the landing page click here you can see both images, it's only when you click on the still image the function works the way is should - only displaying one image at a time. Does anyone know how i can resolve this problem?
You'll have to give the image a display:none style as well to start with:
<img id="center-img-gif" alt="main-img" src="css/images/logo.gif" style="display:none;">
use CSS property Display:none; for one of the images.
You can set display:none of one image at design time OR You can set display:none of one image on body onload