Discussion :

[amnay]

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

[Muchos]

Voir du côté de la propriété overflow.

Ça impliquera de mettre la DIV grise dans la rouge.

[rodolphebrd]

Bonjour,

+1 @Muchos

Par contre sans changer votre html vous pouvez obtenir cela et avec une transition...

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
#dg {
	background: red;
	width: 300px;
	height: 100px;
	overflow:hidden;
}
#db {
	background: gray;
	width: 200px;
	margin-left: 260px;
	transition: margin-left 1s ease;
}
#db:hover {
	background: gray;
	width: 200px;
	margin-left: 100px;
}

[Bisûnûrs]

Ça impliquera de mettre la DIV grise dans la rouge.

Ca a l'air d'être déjà le cas.