You can post now and register later.
If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.
Актуальные контакты:
Telegram: @Nikker_web
E-Mail: tarasevich.email@gmail.com
Портфолио https://www.behance.net/d4d4186e
Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ
Актуальные контакты:
Telegram: @Nikker_web
E-Mail: tarasevich.email@gmail.com
Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ
Портфолио https://www.behance.net/d4d4186e
Question
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 **/
}
Link to comment
Share on other sites
0 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.