Bonjour !
J'aimerai faire un menu où dans chaque <li>, il y a <img src="A.png"><p>AaAa</p>, et qu'au survol du <li>, l'image se "décale" vers la droite pour laisser apparaître le texte à sa gauche.
Voici mon code HTML :
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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="styles.css" />
		<title>Menu qui s'ouvre vers la gauche</title>
	</head>
 
	<body>
		<ul>
			<li>
				<img src="A.png" alt="A" /><!--
				--><p>AaAaAaAa</p>
			</li><!--
			--><li>
				<img src="B.png" alt="B" /><!--
				--><p>BbBbBbBb</p>
			</li>
		</ul>
	</body>
</html>
Ainsi que le CSS :
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
li
{
	display:inline-block;
	background:#e5a541;
	width:50px;
	height:50px;
	overflow:hidden;
	color:#e5471d;
	transition-property:width;
	transition-duration:2s;
	padding:0;
}
 
li img
{
	display:inline-block;
	vertical-align:top;
}
 
li p
{
	display:inline-block;
	vertical-align:top;
	text-align:center;
	width:150px;
	height:50px;
	line-height:50px;
	padding:0;
	margin:0;
}
 
li:hover
{
	width:200px;
}

Cependant, avec ce code, l'image reste fixe et c'est le changement de taille du <li> qui fait apparaître le texte à droite de l'image (tout le contraire, en somme).
De plus, le texte met un certain temps avant d'apparaître : il attends que la transition soit finie.

Comment remédier à ces soucis ?

Merci d'avance !

[EDIT] Voilà ce que je cherche à obtenir :