带转换的HTML-Z索引

我的html项目有问题。当我胡佛一个图像，它会变得更大，但它不包括图像旁边的其他。（只剩下一个）

CSS:

HTML

{zdjecie%中的i的%
{{i.title}}
{%endfor%}

z-index

在具有

静态

定位的对象上无法按预期工作

将

position:relative

添加到您的

.photo

元素以解决问题：

.photo{
利润率：10px0；
宽度：120px；
背景：白色；
填充：10px；
不透明度：1；
边界半径：5px；
边框：1px纯银；
框大小：边框框；
证明内容：周围的空间；
柔性包装：包装；
变换：旋转（5度）；
过渡：0.3秒，全部缓进缓出；
改变：转变；
调整项目：灵活启动；
显示：内联flex；
位置：相对；/*添加此*/
}
.照片img{
弹性基准：100%；
宽度：100px；
}
.照片{
边缘顶部：10px；
}
.照片：第n个孩子（偶数）{
变换：旋转（-5度）比例（0.8）；
}
.照片：悬停{
不透明度：1；
变换：比例（2.0）；
z指数：10；
}

{{i.title}}
{{i.title}}
{{i.title}}
{{i.title}}
{{i.title}}
{{i.title}}
{{i.title}}
{{i.title}}
{{i.title}}
{{i.title}}

.photo {

  margin: 10px 0;
  width: 120px;
  background: white;
  padding: 10px;
  opacity: 1;
  border-radius: 5px;
  border: 1px solid silver;
  box-sizing: border-box;
  justify-content: space-around;
  flex-wrap: wrap;
  transform: rotate(5deg);
  transition: 0.3s all ease-in-out;
  will-change: transform;
  align-items: flex-start;
  display: inline-flex;

}

.photo img {
  flex-basis: 100%;
  width: 100px;
}

.photo figcaption {
  margin-top: 10px;
}

.photo:nth-child(even) {
  transform: rotate(-5deg) scale(0.8);
}

.photo:hover {
  opacity: 1;
  transform: scale(2.0);
  z-index: 10;

}

{% for i in zdjecie %}

   <figure class="photo" >
    <img src="{{i.url}}"
         alt="Kotek Robert">
    <figcaption>
      {{i.title}}
    </figcaption>
  </figure>

{% endfor %}