11540 sujets

JavaScript, DOM et API Web HTML5

Il faut que tu positionnes ton élément parent en relative et que tu positionnes ton élément enfant en absolute, l'élément est ainsi en place par rapport à son plus proche parent positionné. Tu mets ensuite ton parent en overflow: hidden; Et ensuite tu animes (ou pas là j'ai mis une transition), voici ce que ça pourrait donner:

.parent {
	margin: 0 auto;
	width: 250px;
	height: 250px;	
	background-color: grey;
	position: relative;
	overflow: hidden;
}
.child {
	width: 200px;
	height: 200px;
	background-color: yellow;
	position: absolute;
	left: 250px;
	transition: 0.2s;
}
.parent:hover .child {
	transition: 0.2s;
	left: 0;
}