Witam, jestem początkujący w CSS i HTML, robię swoją pierwszą stronę i mam pewien problem, którego nie potrafię rozwiązać.
Mam zamiar stworzyć stronę startową podzieloną na pół. Na 1 połowie zdjęcie i napis i na 2 połowie zdjęcie i napis. Po najechaniu na 1 z tych 2 połówek, dana połówka powiększa się i najeżdża na drugą, następnie bo usunięciu kursora z powierzchni się cofa. Wszystko działa jak należy, tylko mam problem tego typu, że powiększanie i zmniejszanie lewej części strony (obrazka) jest płynne, natomiast prawej nie, ponieważ przy powrocie obrazka do swojej właściwej formy przykrywa go od razu obraz z lewej, ponieważ jego z-index wynosi 1.
Nie mam pomysłu jak to rozwiązać.
Z góry dziękuje za pomoc.
.foto1 {
display: block;
box-sizing: border-box;
position: absolute;
width: 50%;
height: 100%;
top: 0px;
left: 0px;
background-repeat: no-repeat;
background-image: url(drum-set-1839383_1280.jpg);
background-size: cover;
background-position: center;
border-right: 1px outset black;
box-shadow: inset 20px 20px 20px #182019, inset -20px -20px 20px #182019;
transition: all .8s ease-in-out;
cursor: pointer;
z-index: 1;
}
.foto1:hover {
width: 55%;
height: 105%;
top: -2%;
left: 0%;
box-shadow: inset 5px 5px 5px #182019, inset -5px -5px 5px #182019;
}
.foto2 {
display: block;
box-sizing: border-box;
position: absolute;
width: 50%;
height: 100%;
top: 0%;
right: 0%;
background-repeat: no-repeat;
background-image: url(vinyl-4712781_1280.jpg);
background-size: cover;
background-position: center;
border-left: 1px groove black;
box-shadow: inset 20px 20px 20px #182019, inset -20px -20px 20px #182019;
transition: all .8s ease-in-out;
cursor: pointer;
font-family: 'Aladin', sans-serif;
}
.foto2:hover {
width: 55%;
height: 105%;
top: -2%;
right: 0%;
box-shadow: inset 5px 5px 5px #182019, inset -5px -5px 5px #182019;
z-index: 1;
}