Эффект при наведении, заставляющий изображение плавать влево при наведении

Question

У меня есть изображение с определенными точками поверх положенных, что при наведении на эти точки выскакивает информация. У меня работает hover, однако, когда пятна отображаются, чтобы показать эту информацию, пятна смещаются влево, а не остаются на месте. Я не могу понять, почему и хотел бы любую помощь, пожалуйста.

  <div class="model">
     <img src="images/baman.png">
  </div> 

  <div id="pain1">
     <img class="pain1" src="images/painspot.png">
     <img class="shoulder" src="images/shoulder.png">
  </div>  

  <div id="pain2">
     <img class="pain2" src="images/painspot.png">
     <img class="back" src="images/back.png">
  </div>

  <div id="pain3">
     <img class="pain3" src="images/painspot.png">
     <img class="hip" src="images/hip.png">
  </div>

CSS:

.model {
  position: absolute;
  right: 500px;
}

 #pain1 {
   position: relative;
   left: 65px;
   top: 130px;
 }

 .shoulder {
  display: none;    
  }

 .pain1:hover + .shoulder {
   display: inline; 
  }

  #pain2 {
   position: relative;
   left: -25px;
   top: 240px;
  }

  .back {
  display: none;    
  }

  .pain2:hover + .back{
    display: inline;
  }

   #pain3 {
    position: relative;
    left: 30px;
    top: 240px;
  }

  .hip {
    display: none;  
  }

  .pain3:hover + .hip{
     display: inline;   
  }

Answer 1

Jsfiddle здесь: jsFiddle

.model {
 /*code*/
}

Достигнуть не сложно, только скопируйте и вставьте;) В примере не плавают какие-либо элементы, вы уверены, что ваши изображения плавают влево? Если это так, убедитесь, что никакой другой код не переопределяет.