Change Image on mouse rollover

Hello,

I have a photo blog hosted by wordpress. my requirement was to show an image on mouse over event (rollover…whatever that is called). After some searching, found that blogs hosted by wordpress aren’t allowed to use javascript, so with the help of some folks managed to get a small set of CSS code working to get the image rollover.

Code in the template:

img.nohover {
border:0
}
img.hover {
border:0;
display:none
}
a:hover img.hover {
display:inline
}
a:hover img.nohover {
display:none
}

Code for each post which needs an image displayed when mouse-rollover-event happens:

< a href="link.html">
<img alt="image" src="images/image.png" class="nohover" />
<img alt="imagehover" src="images/image.png" class="hover" />
</a>

On blogger platform this works perfect. Here is an example page showing it working.

On a wordpress platform it works, but the resulting mouse over image changes its position. An example of that is here.

Any ideas on how to go about fixing this? I’m new to CSS, but will take any help I can get on this.

Thanks,
-Sudhi.