Bloc & Défillement

<style type="text/css">.blackmove {margin:auto; padding:0px; text-align:justify; width:500px; height:200px; background:#FFF url(http://i39.servimg.com/u/f39/11/59/31/05/rxttnp10.jpg); color:#666; line-height:12px;} .textes {margin:0px; padding:0px; width:500px; float:left; display:block;} .texte2 {margin-top:-132px; margin-left:500px; padding:0px; width:0px; height:200px; position:absolute; float:left; overflow:hidden; display:block; background:#FFF url(http://i39.servimg.com/u/f39/11/59/31/05/rxttnp10.jpg); transition:0.7s all ease;} .textes:hover .texte2 { margin-top:-132px; margin-left:0px; width:500px; height:200px; background:#FFF url(http://i39.servimg.com/u/f39/11/59/31/05/rxttnp10.jpg); transition:1s;}</style>

<style type="text/css">.blackmove {margin:auto; padding:0px; text-align:justify; width:500px; height:200px; background:#FFF url(http://i39.servimg.com/u/f39/11/59/31/05/rxttnp10.jpg); color:#666; line-height:12px;} .textes {margin:0px; padding:0px; width:500px; float:left; display:block;} .texte2 {margin-top:-132px; margin-right:0px; padding:0px; width:0px; height:200px; position:absolute; float:right; overflow:hidden; display:block; background:#FFF url(http://i39.servimg.com/u/f39/11/59/31/05/rxttnp10.jpg); transition:0.7s all ease;} .textes:hover .texte2 { margin-top:-132px; margin-right:0px; width:500px; height:200px; background:#FFF url(http://i39.servimg.com/u/f39/11/59/31/05/rxttnp10.jpg); transition:1s;}</style>

<div class="blackmove"><div class="textes"><span class="texte1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper varius neque lacinia faucibus. Vivamus consequat elementum turpis, eu rhoncus massa cursus ut. Etiam semper tellus a ex faucibus placerat. Duis sagittis mollis nunc, et lobortis enim fringilla eget. Nam non nulla vel odio sagittis convallis et vitae tortor. Quisque gravida tempor neque ac aliquam. Quisque finibus dolor at lorem tempor ultricies. Duis sed lacus commodo, feugiat ligula eu, sollicitudin est. Etiam sed blandit nunc. Vivamus id ante gravida, interdum nunc id, luctus dolor. In eget nisl lacus. Fusce ante nunc, tincidunt eu felis at, aliquet scelerisque magna. Mauris facilisis dui at arcu consectetur, sed tincidunt mi ornare. Sed nec hendrerit elit. Pellentesque interdum nibh ut elit sagittis semper. Nunc vel ex eget tellus imperdiet laoreet eget sit amet urna.</span><span class="texte2">Zone de texte n°2.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper varius neque lacinia faucibus. Vivamus consequat elementum turpis, eu rhoncus massa cursus ut. Etiam semper tellus a ex faucibus placerat. Duis sagittis mollis nunc, et lobortis enim fringilla eget. Nam non nulla vel odio sagittis convallis et vitae tortor. Quisque gravida tempor neque ac aliquam. Quisque finibus dolor at lorem tempor ultricies. Duis sed lacus commodo, feugiat ligula eu, sollicitudin est. Etiam sed blandit nunc. Vivamus id ante gravida, interdum nunc id, luctus dolor. In eget nisl lacus. Fusce ante nunc, tincidunt eu felis at, aliquet scelerisque magna. Mauris facilisis dui at arcu consectetur, sed tincidunt mi ornare. Sed nec hendrerit elit. Pellentesque interdum nibh ut elit sagittis semper. Nunc vel ex eget tellus imperdiet laoreet eget sit amet urna.</span></div></div>