如何在CSS中叠加多个<img/>

Question

我有这个html：

  <Grid.Column   width={4}>
        <div className="imagenesVueltas">
          <Image data-index="1" src='00001.png'/>
          <Image data-index="2" src='00002.png'/>
          <Image data-index="3" src='00003.png'/>
          <Image data-index="4" src='00004.png'/>

        </div>
  </Grid.Column>

每个都在CSS中具有这种样式：

img[data-index='1'] {
 width: 100px;
 z-index: 1;
 }
img[data-index='2'] {
width: 100px;
 z-index: 2;
 }
img[data-index='3'] {
width: 100px;
z-index: 3;
}
img[data-index='4'] {
width: 100px;
z-index: 4;

}
.imagenesVueltas{
 position: relative;

 }

但是它们只是从容器的顶部向下堆叠，每行一个。

像这样：

但是我希望您只看一眼并更改可见度，看来您在同一位置旋转

更新：我尝试使用此线程How to overlay images 但我无法对图片进行正对。已经尝试了该线程的所有答案，但是图像没有移动，它们在相同的位置继续：/