HTML - Z-index with transition - html

Question

I got a problem with my html project. When I hoover an image it gets larger but it does not cover images next to each other. (only left one)
https://i.imgur.com/oNP4gHA.png
https://i.imgur.com/g2zIoSr.png
CSS:
.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;
}
HTML
{% for i in zdjecie %}
<figure class="photo" >
<img src="{{i.url}}"
alt="Kotek Robert">
<figcaption>
{{i.title}}
</figcaption>
</figure>
{% endfor %}

Answer 1

z-index won't function as expected on objects with static positioning.
Add position: relative to your .photo elements to fix the issue:
.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;
position: relative; /* add this */
}
.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;
}
<figure class="photo">
<img src="{{i.url}}" alt="Kotek Robert">
<figcaption>
{{i.title}}
</figcaption>
</figure>
<figure class="photo">
<img src="{{i.url}}" alt="Kotek Robert">
<figcaption>
{{i.title}}
</figcaption>
</figure>
<figure class="photo">
<img src="{{i.url}}" alt="Kotek Robert">
<figcaption>
{{i.title}}
</figcaption>
</figure>
<figure class="photo">
<img src="{{i.url}}" alt="Kotek Robert">
<figcaption>
{{i.title}}
</figcaption>
</figure>
<figure class="photo">
<img src="{{i.url}}" alt="Kotek Robert">
<figcaption>
{{i.title}}
</figcaption>
</figure>
<figure class="photo">
<img src="{{i.url}}" alt="Kotek Robert">
<figcaption>
{{i.title}}
</figcaption>
</figure>
<figure class="photo">
<img src="{{i.url}}" alt="Kotek Robert">
<figcaption>
{{i.title}}
</figcaption>
</figure>
<figure class="photo">
<img src="{{i.url}}" alt="Kotek Robert">
<figcaption>
{{i.title}}
</figcaption>
</figure>
<figure class="photo">
<img src="{{i.url}}" alt="Kotek Robert">
<figcaption>
{{i.title}}
</figcaption>
</figure>
<figure class="photo">
<img src="{{i.url}}" alt="Kotek Robert">
<figcaption>
{{i.title}}
</figcaption>
</figure>