2 pièce(s) jointe(s)
Appliquez un z-index sur un svg
Bonjour
je réalise une animation au hover sur une page
au départ j'ai ça:
Pièce jointe 648824
au hover j' obtiens ca :
Pièce jointe 648825
Code:
1
2
3
4
5
| <div class="pic deux">
<svg>
</svg>
<h1><span>air max</span></h1>
</div> |
Code:
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.
