Bonjour à tous ,

Dans ma page html, j'ai deux éléments. Un bloc SVG avec un objet Path et un bloc image. Pour le moment j'arrive à animer le PATH au chargement de ma page mais ce que je souhaiterais est que l'animation se déclenche seulement si la souris passe au dessus de l'image, et qu'elle fasse le chemin inverse pour s'effacer lorsque la souris n'est plus sur l'image.

Place au code CSS

Code : 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
42
43
44
45
46
47
48
49
50
51
*{
	margin:0;
	padding:0;
}
 
.body{
	width: 100%;
	height:100%;
}
 
.container {
   margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
 
.test{
	position: absolute;
  top: 50%;
  left: 50%;
	width: 200px;
	height:100px;
}
 
.test-path{
	fill:none;
	stroke:orange;
	stroke-width:7;
	stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
	animation: animtest 2.5s forwards;
}
.my-image{
position: absolute;
  top: 70%;
  left: 50%;
  width: 100px;
  height:100px;
  opacity: 0.4;
}
 
.my-image:hover{
  opacity: 1;
}
@keyframes animtest {
  from {stroke-dashoffset: 1000;}
  to {stroke-dashoffset: 0;}
}
Place au
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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>TEST SVG PATH</title>
<link rel="stylesheet" type="text/css" href="css/test.css" />
</head>
<body>
		<div class="container">
		<div class= "test">
		<svg>
			<path class="test-path" d="M0,50,100,50 M 110, 50 m -8, 0 a 8,8 0 1,0 16,0 a 8,8 0 1,0 -16,0 Z"/>
		</svg></div>
		<div class="my-image"><img src="https://www.w3schools.com/tags/smiley.gif" alt="test image"></div>
	</div>
</body>
</html>

Si quelqu'un sait comment faire, je suis preneur de toutes idées