Как перенести изображение справа налево

Question

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

Вот код, который я до сих пор:

 <img class="computers" src="images/shauna.png"> 
     <img class="computers" src="images/bbb.png" > 
     <img class="computers" src="images/cotp.png" > 
     <img class="computers" src="images/chocolate.png" > 

и CSS:

.computers { 
    height:300px; 
    width:300px; 
    margin:2% 0 0 5%; 
    float:left; 
    overflow: auto; 
    -webkit-transition: all 2s; /* For Safari 3.1 to 6.0 */ 
    transition: all 2s 
} 

.computers:hover { 
    width: 570px; 
    height: 500px; 
    padding: 100px; 
} 

Для живого примера того, что я имею в виду, взгляните на фотографии и их движение здесь: example.cadencemag.com

Answer 1

Хорошо, если я правильно понял ваш запрос, я улучшил свой первоначальный ответ - это чистое решение CSS3, работает во всех основных броузерах и IE9 +. Посмотрите это в демо-версии codepen - http://codepen.io/anon/pen/YXgLvp

Обратите внимание, что размеры изображения в два раза больше размера миниатюры, поэтому при применении масштабирующего коэффициента CSS2 x2 он остается совершенно четким. Вы также можете установить положение, откуда расширяется переход.

.computers { 
    height:200px; 
    width:200px; 
    margin: 50px 0px 0 100px; 
    float:left; 
    overflow: hidden; 
    -ms-transition: all 0.8s; 
    -webkit-transition: all 0.8s; 
    transition: all 0.8s; 
} 

.computers:hover { 
    -ms-transform: scale(2,2); /* IE 9 */ 
    -webkit-transform: scale(2,2); /* Chrome, Safari, Opera */ 
    transform: scale(2,2); /* all other browsers */ 
    -ms-transform-origin: 50% 0%; /* IE 9 */ 
    -webkit-transform-origin: 50% 0%; /* Chrome, Safari, Opera */ 
    transform-origin: 50% 0%; /* all other browsers */ 
}