Hover et esperluette

Bonsoir

J'essaie de reproduire l'effet du hover comme décrit dans cette vidéo

https://www.youtube.com/watch?v=a2EDox3dVsI&t=0s

j ai donc reproduis le code

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
29
30
31
32
33
<html>
<head>
<title></title>
<meta charset="UTF68">
 
<link rel="stylesheet" href="style.css">
</head>
 
<body>
 
<div class="container">
 
 
<div class="img-wrapper">
 
 
    <img src="images/burger.jpg" alt="burger">
</div>
 
 
 
 
 
</div>
 
 
 
 
 
 
 
 
</body>

le css:

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
body{
   max-width: 1200px;
   margin: auto;
    background-color:royalblue;
    display: flex;
    align-items: center;
    justify-content: center;
}
 
 
.img-wrapper{
 
    overflow: hidden;
 
    &:hover {
        img { transform: scale(1.5); } 
 
    }  
}
 
img{
   transition: all 300ms linear; 
 
}

Le problème est que j'obtiens une erreur a-priori l esperluette pose problème

pourrais-je avoir des explications?
J'ai reproduit in-extenso le code de la vidéo.

ce n'est pas du css mais du code scss :
https://sass-lang.com/documentation/...example-1-scss

Merci