Cannot position image rollovers on page - html

Question

I'm new to HTML/CSS and am in the process of learning it in hopes of transferring the knowledge to running an online newspaper that I am the editor of. Currently, I am working on my own website which has an image rollover on it. I have run into the issue where the rollover works perfectly, but I cannot move it left or right or up and down. For each new rollover I add, they will just stack one underneath the other all the way down the page. How do i solve this issue and be able to position the rollover around the page as if it were a normal picture. Below it the code. Thanks in advance.
if you notice any other discrepancies that i need to fix, I would gladly appreciate it.
the body
<div id="Chasity">
<img src="http://i34.photobucket.com/albums/d141/truevintage101/About%20us/72846ed1-9028-44bd-8671-3b4d7c6f7854_zps5a4e0faf.png"onmouseover="this.src='http://i34.photobucket.com/albums/d141/truevintage101/About%20us/Chasitytitle2_zps8b7679b9.png'" onmouseout="this.src='http://i34.photobucket.com/albums/d141/truevintage101/About%20us/72846ed1-9028-44bd-8671-3b4d7c6f7854_zps5a4e0faf.png'" />
and css
body {
{block:IfNotDarkLayout}
width:100%;
height:100%;
color: #333;
color: rgba(0,0,0,.9);
{/block:IfNotDarkLayout}
{block:IfDarkLayout}
color: #fcfcfc;
color: rgba(255,255,255,.9);
{/block:IfDarkLayout}
background: {color:Content Background};
font-family: "Century Schoolbook", Century, Georgia, serif;
text-shadow: 0 0 1px {color:Content Background};
}
.Chasity{
left:300px;
top:400px;
position:fixed;
padding-top:10px;
padding-right:50px;
{CustomCSS}

Answer 1

simply use the div:hover selector to change the image and then you can move it wherever you want, see my example here
html:
<a href="http://google.com">
<div class="box"></div>
</a>
css:
a{
display:block;
padding:0;
width:200px;
height:500px;
margin:auto;
}
.box{
background:url('http://placekitten.com/200/500');
display:block;
height: 100%;
width:100%;
margin:auto;
}
.box:hover{
background:url('http://placekitten.com/200/501');
}
http://jsfiddle.net/KLxUy/