Bonjour

je réalise une animation au hover sur une page

au départ j'ai ça:

Nom : sans.jpg Affichages : 376 Taille : 14,1 Ko

au hover j' obtiens ca :

Nom : hover.jpg Affichages : 348 Taille : 35,7 Ko

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
              <div class="pic deux">
                        <svg>
                        </svg>    
                            <h1><span>air&nbsp;max</span></h1>
               </div>

Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
svg{
    width:300px;
    height:150px;
    display: block;
    transform: rotate(-45deg);
    z-index:7;
   }
h1 span{
    font-weight: bold;
    text-transform: uppercase; 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity:0;
    z-index:1;
    transition: .5s ease;
}
 
.pic:hover{
flex: 2;
transform-origin: left;
}
 
.pic:hover  h1 span{
opacity: 1;
 font-size:12em;
}


j'ai du mal a comprendre pourquoi le z-index ne marche pas sur l 'élément svg.
Pourrais-je avoir des explications SVP ?

Merci.