Изображения остаются на одном уровне и при увеличении ширины, благодаря z-index, одно из них должно было бы перекрыть другое, но изображения просто делают отступ от растянутой картинки
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css" >
<title>Document</title>
</head>
<body>
<img src="1.jpg" alt="1" width="100px" height="100px" class = "one">
<img src = "2.jpg" alt = "2" width="100px" height="100px" class="two">
<img src = "3.jpg" alt = '3' width="1000px" height="100px" class=" three">
</body>
</html>
.one, .two, .three{
position: relative;
}
.one{
top: 50px;
left: 0px;
z-index: 1;
}
.two{
top: 50px;
left: 30px;
z-index: 2;
}
.three{
top: 50px;
left: 60px;
z-index: 3;
}
Простой
Средний
