KÓD.
<center>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<style class="text/css">
.froyo {position: relative; width: 360px; height: 480px; background-color: #F89399; overflow: hidden;}
.froyo1 {position: absolute; width: 360px; height: 380px; background-color: #BFB0C3; top: 100px; }
.froyo2 {position: relative; width: 300px; height: 245px; top: 65px; padding: 10px; margin: 20px; text-align: justify; font: 10px arial; overflow: auto; -webkit-transition:all 1s ease-in-out; transition:all 1s ease-in-out; -moz-transition:all 1s ease-in-out; -o-transition:all 1s ease-in-out; -webkit-transform:translateY(305px); transform:translateY(305px); -moz-transform:translateY(305px); -o-transform:translateY(305px);}
.froyo2 i{color: #ff0000;} .froyo b {color: #000000;}
.froyo2::-webkit-scrollbar {width: 3px; }
.froyo2::-webkit-scrollbar-track { border: 1px solid #ffffff; background-color: #F89399; }
.froyo2::-webkit-scrollbar-thumb { background-color: #F89399; }
.froyo3 {position: absolute; width: 160px; height: 160px; left: 100px; top: 160px; background-size: 160px 160px; border-radius: 80px; -webkit-border-radius: 80px; -moz-border-radius: 80px; -webkit-transition:all 1s ease-in-out; transition:all 1s ease-in-out; -moz-transition:all 1s ease-in-out; -o-transition:all 1s ease-in-out; -webkit-transform:translateY(0px); transform:translateY(0px); -moz-transform:translateY(0px); -o-transform:translateY(0px);}
.froyo:hover .froyo3{position: absolute; -webkit-transform:translateY(-145px); transform:translateY(-145px); -moz-transform:translateY(-145px); -o-transform:translateY(-145px);}
.froyo:hover .froyo2{position: relative; -webkit-transform:translateY(-0px); transform:translateY(-0px); -moz-transform:translateY(-0px); -o-transform:translateY(-0px);} </style><center>
<div class="froyo"><div class="froyo1"><div class="froyo2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <b>Si longus, levis.</b> Ita fit beatae vitae domina fortuna, quam Epicurus ait exiguam intervenire sapienti. Quid de Platone aut de Democrito loquar? Tum Piso: Quoniam igitur aliquid omnes, quid Lucius noster? Duo Reges: constructio interrete. Nonne videmus quanta perturbatio rerum omnium consequatur, quanta confusio? An potest cupiditas finiri? Rhetorice igitur, inquam, nos mavis quam dialectice disputare? Videmus igitur ut conquiescere ne infantes quidem possint. Si mala non sunt, iacet omnis ratio Peripateticorum.
<p>Sin aliud quid voles, postea. <i>Sed plane dicit quod intellegit.</i> <b>Nulla erit controversia.</b> Scientiam pollicentur, quam non erat mirum sapientiae cupido patria esse cariorem. <i>Simus igitur contenti his.</i> Quis est, qui non oderit libidinosam, protervam adolescentiam? Hoc enim constituto in philosophia constituta sunt omnia. Hoc enim constituto in philosophia constituta sunt omnia. </p>
<p><i>Poterat autem inpune;</i> Omnia contraria, quos etiam insanos esse vultis. Sed plane dicit quod intellegit. </p>
<p>Quicquid enim a sapientia proficiscitur, id continuo debet expletum esse omnibus suis partibus; <i>Omnes enim iucundum motum, quo sensus hilaretur.</i> <b>Dicimus aliquem hilare vivere;</b> Quid de Platone aut de Democrito loquar? Quod autem magnum dolorem brevem, longinquum levem esse dicitis, id non intellego quale sit. Nescio quo modo praetervolavit oratio. <i>Perge porro;</i> </p>
<p>Ut proverbia non nulla veriora sint quam vestra dogmata. Quis Aristidem non mortuum diligit? </p>
</div></div>
<div class="froyo3" style="background-image:url(https://jegvirag.gportal.hu/portal/jegvirag/image/gallery/1647256735.jpg);"></div>
</div>
<center>