How to position image that has a jquery hover effect?

    <script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function(){

$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});

});
</script>
<style>
div.fadehover {
    position: relative;
    }

img.a {
    position: absolute;

        z-index: 10;
    }

img.b {
    position: absolute;

    }
</style>
</head>

<body>

<div class="fadehover" align="center">
<img src="Facebook.png" alt="" class="a" />
<img src="Facebook_hover.png" alt="" class="b" />
</body>

So I have this image fade hover effect on my image and it works fine. BUT i try to postition it where i want because now it is on the top left corner. How can I position the image in the center? or generally where I want? tried with simple center tags but doesnt work. Any ideas?

Solution

Put the images inside their own divs inside the .fadehover div and apply the position styling to them and not the images.

Edit: Code is as follows

<script type='text/javascript'>
$(document).ready(function(){
$("div.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});

});
</script>
<style>
div.fadehover {
    position: relative;
}

div.a {
    position: absolute;
    z-index: 10;
}

div.b {
    position: absolute;
}
</style>
<div class="fadehover">
    <div class="a"><img src="yourimage1.ext" /></div>
    <div class="b"><img src="yourimage2.ext" /></div>
</div>