HTML - Z-index avec transition

Question

J'ai un problème avec mon projet html. Lorsque j'ouvre une image, elle devient plus grande mais ne couvre pas les images les unes à côté des autres. (Uniquement de gauche)

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 ne fonctionnera pas comme prévu sur les objets avec static positionnement.

Ajouter position: relative à vos .photo éléments pour résoudre le problème:

.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>