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
Partager