<style type="text/css">#hg{ width: 400px; height: 450px; background: #ffffff; margin: auto; position: relative; overflow:hidden; } #hg #bild {height: 450px; width: 400px; background: url('http://img5.fotos-hochladen.net/uploads/bild2kzo80vhmpa.png'); margin: auto; padding: 0px; position: absolute; right: 0px; transition: 1s; } #hg:hover #bild { right: -400px; transition: 1s; } #textbox {width: 400px; height: 450px; background: #ffffff; overflow-y: scroll; overflow-x:hidden; margin: auto;} </style>

<div id="box"><div id="hg"><div id="bild"> </div> <div id="textbox"> <div align="justify"><div style="text-align:justify; padding:20px; line-height:90%"><center><img src="http://www.fotos-hochladen.net/uploads/bild3h5k0cuvjqi.png" border="0"><div style="font-family: 'oswald'; font-size: 35px; letter-spacing: -1px; margin-top: 10px; color: #1b140f; line-height: 35px; text-transform:uppercase; font-style:bold;">SUCHENDE(R)</div><div style="font-family: tahoma; font-size: 9px; letter-spacing: 2px; line-height: 7px;">VOLLER NAME</div></center>
Infos über den Charakter

<br><center><img src="http://www.fotos-hochladen.net/uploads/bild3h5k0cuvjqi.png" border="0">
<div style="font-family: 'oswald'; font-size: 35px; letter-spacing: -1px; margin-top: 10px; color: #1b140f; line-height: 35px; text-transform:uppercase; font-style:bold;">GESUCHTE(R)</div><div style="font-family: tahoma; font-size: 9px; letter-spacing: 2px; line-height: 7px;">VOLLER NAME</div></center>
Infos über den Charakter

<br><div style="border-top:1px #000000 solid; padding-top:20px;">Das übliche Blabla</div></div></div></div> </div>