iPozitiv

Добрый день! 2 дня в изучении HTML+CSS, прошу сильно не пинать если назову вещи не своими именами... Имеется несколько изображений, слоями расположенными друг над другом, и выдвигающиеся при наведении на них курсора мыши. Сейчас #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 **/ }