Bonjour,
Bon je débute en CSS...
J'ai une grid avec 6 images.
Je voudrais que sur un hover sur une image, celle ci se déplace au centre de l'écran.

mon
Code html : 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">
    <link rel="stylesheet" href="cv.css">
    <title>CV</title>
</head>
<body>
<div class="parent">
    <div class="div1">div 1 </div>
    <div class="div2">div2 </div>
    <div class="div3">div3 </div>
    <div class="div4">div4 </div>
    <div class="div5">div5 </div>
    <div class="div6">div6 </div>
    </div>
 
</body>
</html>


mon
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
29
30
31
32
33
34
35
36
37
38
39
40
41
.parent {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    position: relative;
    }
 
    .div1 { grid-area: 1 / 1 / 4 / 2;
            background-color: aqua; 
 
 
            }
    .div2 { grid-area: 3 / 3 / 6 / 4;
            background-color: brown;
            //position: absolute;
         }
    .div3 { grid-area: 1 / 5 / 4 / 6;
            background-color: coral; 
            //position: absolute;
            }
    .div4 { grid-area: 1 / 3 / 2 / 4; 
            background-color: darkorchid;
            //position: absolute;
        }
    .div5 { grid-area: 3 / 2 / 5 / 3; 
            background-color: fuchsia;
            //position: absolute;
        }
    .div6 { grid-area: 2 / 4 / 4 / 5;
            background-color: darkgreen;
            //position: absolute; 
        }
    .div1:hover  {
 
                transform: translate(50%,50%);
 
                //transform: rotate(30deg);
                /*transform: translateX(200px);*/
              }


quand j'execute la translation, le bloc se deplace mais de 50% de sa propre taille.
Il y a une histoire de contenu et de contenant je suppose et de positionnement relatif/absolu... mais j'ai essayé plein de choses et je ne mets pas le doigt dessus...
Si quelqu'un peut m'orienter...ou peut-être utiliser autre chose que les grid ?

Merci