Невозможно разместить ролловеры изображений на странице

Question

Я новичок в HTML/CSS и изучаю его в надежде перенести знания в онлайн-газету, редактором которой я являюсь. В настоящее время я работаю над своим собственным сайтом, на котором есть ролловер изображений. Я столкнулся с проблемой, когда ролловер работает отлично, но я не могу переместить его влево или вправо или вверх и вниз. Для каждого нового ролловера, который я добавляю, они будут просто складывать один под другим весь путь вниз по странице. Как я могу решить эту проблему и быть в состоянии разместить ролловер вокруг страницы, как если бы это была обычная картинка. Ниже это код. Заранее спасибо.

если вы заметите какие-либо другие несоответствия, которые мне нужно исправить, я с удовольствием это оценил бы.

тело

    <div id="Chasity"> 
    <a href="http://falserealityfilmsabout.tumblr.com/IIASVoiceofChasity"><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'" /></a>

и 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;

{Пользовательские CSS}

Answer 1

Просто используйте селектор div:hover, чтобы изменить изображение, и затем вы можете переместить его куда угодно, см. мой пример здесь

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/