Witam
Tworzę swoją stronę i chciałbym w 1 miejscu nałożyć na siebie 3 zdjęcia. Pewnie jest to dziwne, ale 1 zdjęcie to taki mały szablon, 2 zdjęcie to koło zębate, które będzie się obracało, a 3 zdjęcie to narzędzia ;).
Jak poprawnie zdjęcia na siebie nałożyć, aby były wycentrowane względem niebieskiego boxa?
Próbowałem zrobić box na relative oraz 1 zdjęcie czyli inz na relative to ładnie się wycentrowało. Natomiast problem jest z następnymi zdjęciami. Dziwnie przesuwają się w różne miejsca, nie chcą się centrować, a chce je umieścić w tym szablonie (1 zdjeciu) jeden na drugim. Jak polecacie to zrobic? zdjęcie strony na dole.
html:
<div class="box2">
<center><img src="images/inz1.png" class="inz"></center>
<img src="images/GEAR2.png" class="engineer">
<img src="images/tools.png" class="tools">
</div>
CSS:
.box2{
position: relative;
flex: 2;
background: blue;
}
inz{
position: relative;
height: 300px;
}
.engineer{
position: absolute;
height: 140px;
top: 0;
margin: auto;
width: auto;
}
.tools{
position: absolute;
height: 220px;
display: block;
margin-left: 0;
margin-right: 0;
}