Изображение перемещение налево на hover

Question

Я новичок в веб-дизайне, и у меня есть конкретный пример, хорошо, я застрял здесь: У вас есть 3 изображения, объединяющие логотип, и когда вы идете навести средние изображения, как 50px с каждой стороны. Я достиг цели, чтобы перемещать изображение с правой стороны с заполнением, но когда я пытаюсь сделать то же самое для левой стороны, мое изображение начинает прыгать влево и назад в исходное место.

Если у кого-то есть лучшее предложение, я люблю его изучать.

Это example того, чего я хочу достичь.

Я придумал этот код:

#logo_levo{ 
     position: absolute; 
     float: right; 
     width: 111px; 
     height: 111px; 
     -moz-transition:all 0.3s linear; 

    } 
    #logo_levo:hover{ 
     padding-right: 100px; 
    } 

HTML:

<img id="logo_levo" src="data/images/Class_B_obroc1_logo.png"/> 

Answer 1

хорошо здесь то, что вы можете работать. правила CSS на fiddle..check скрипкой

fiddle here

<div id='logo'> 
    <div id='a'></div><!--left image--> 
    <div id='b'></div><!--middle image--> 
    <div id='c'></div><!--right image--> 
</div>