Bonjour à tous

je cherche à faire apparaitre une petit d'un div sur un autre div sans que le premier déborde sur la page,

mon code est le suivant :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
<div id="dg">
<div id="db"> <span id="s1">image</span> <span id="s2">ici le text avec une autre image</span><span id="s3">aa</span></div>
 
</div>

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
#dg{
	background: red;
	width: 300px;
	height: 100px;
 
}
 
#db{
	background: gray;
	width: 200px;
	margin-left: 260px;
}
 
#db:hover{
	background: gray;
	width: 200px;
	margin-left: 100px;
}
j'aimerais que la partie du div gris qui déborde à droite soit invisible.

le but et de réaliser une animation au moment de passage de la sourie sur le div gris pour l'afficher comme le montre les prises d'écran :






résultat souhaité ( réalisé par traitement d'image ) :






Merci par avance