Witam,
mam sklejone ze sobą 4 obrazki w Css, z każdego z nich chcę zrobić linka, oraz użyć efektu powiększenia obrazku po najechaniu na niego myszką. Efekt uzyskałam, ale jedynie obrazek w lewym górnym kwadracie przesłania pozostałe po powiększeniu, pozostałe powiększają się, ale są "przysłonięte" przez pozostałe. Jak mogę to poprawić w css, aby każdy powiększany obrazek znajdował się na pierwszym planie ?
#a{
width: 350px;
height: 350px;
background-image: url(1a.jpg);
position:absolute;
left: 270px;
top:0px;
transition: width 2s linear 1s, height 2s ease-in 1s;
transition: transform 0.3s;
}
#a:hover
{
transform: scale(1.05);
}
#b{
width: 350px;
height: 350px;
background-image: url(2a.jpg);
position:absolute;
left: 620px;
top:0px;
transition: transform 0.3s;
}
#b:hover
{
transform: scale(1.05);
}
#c{
width: 350px;
height: 350px;
position:absolute;
left: 270px;
top:350px;
background-image: url(3a.jpg);
transition: transform 0.3s;
}
#c:hover
{
transform: scale(1.05);
}
#d{
width: 350px;
height: 350px;
background-image: url(4a.jpg);
position:absolute;
left: 620px;
top:350px;
transition: transform 0.3s;
}
#d:hover
{
transform: scale(1.05);
}