влияние А на Б (CSS)

[iPozitiv]

Добрый день!
Имеется несколько изображений, слоями расположенными друг над другом, и выдвигающиеся при наведении на них курсора мыши.
Сейчас #start_photo_1, при наведении мыши, смещается из под #start_photo_2 влево.
Вопрос:
Как сместить объект #start_photo_2 вправо, при наведении курсора мыши на #start_photo_1 ?
Заранее спасибо!
имеющийся CSS код приведен ниже

#content {
position:relative;
width: 800px;
height: 484px;
}
 
#start_photo_1{
z-index: 1;
width: 200px;
height: 484px;
-webkit-transition: all 1.5s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 1.5s ease-in-out; /** Firefox **/
-o-transition: all 1.5s ease-in-out; /** Opera **/
}
#start_photo_1:hover{
transform: translate(-90px,0);
-webkit-transform: translate(-90px,0); /** Chrome & Safari **/
-o-transform: translate(-90px,0); /** Opera **/
-moz-transform: translate(-90px,0); /** Firefox **/
}
 
#start_photo_2{
z-index: 2;
position:relative;
left: 100px;
top: -484px;
width: 200px;
height: 484px;
transition: all 1s ease-in-out;
-webkit-transition: all 1.5s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 1.5s ease-in-out; /** Firefox **/
-o-transition: all 1.5s ease-in-out; /** Opera **/
}
#start_photo_2:hover{
transform: translate(-90px,0);
-webkit-transform: translate(-90px,0); /** Chrome & Safari **/
-o-transform: translate(-90px,0); /** Opera **/
-moz-transform: translate(-90px,0); /** Firefox **/
}
 
#start_photo_3{
z-index: 3;
position:relative;
left: 200px;
top: -968px;
width: 200px;
height: 484px;
transition: all 1s ease-in-out;
-webkit-transition: all 1.5s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 1.5s ease-in-out; /** Firefox **/
-o-transition: all 1.5s ease-in-out; /** Opera **/
}
#start_photo_3:hover{
transform: translate(-90px,0);
-webkit-transform: translate(-90px,0); /** Chrome & Safari **/
-o-transform: translate(-90px,0); /** Opera **/
-moz-transform: translate(-90px,0); /** Firefox **/
}