Tekst pod zdjęciem z suwakiem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.

<center>

<style type="text/css">

div#kp {

   background: url('link do zdjęcia');

height:450px; 

width:500px;

border:1px solid #fff; /*obramowanie*/

}

div#tekst {

position: relative;

overflow:hidden;

transition:all 2s;

width:480px; /*szerokość ramki na tekst*/

height:300px; /*wysokość ramki na tekst*/

padding-left:10px; /*odległość  tekstu od ramki*/

padding-right:10px;

padding-top:10px;

color:transparent;

-moz-transition:all 2s;

-webkit-transition:all 2s;

-o-transition:all 2s;

}

div#tekst:hover {

background:white; /*kolor tła na tekst*/

color:#000000; /*kolor czcionki*/

overflow: scroll;

padding-left:10px;

padding-right:10px;

padding-top:10px;

   width:480px; /*szerokość ramki na tekst*/

height:300px; /*wysokość ramki na tekst*/

   opacity:.7; /*poziom przezroczystości*/

transition:all 2s;

-moz-transition:all 2s;

-webkit-transition:all 2s;

-o-transition:all 2s;

}

</style>

<br />

<div id="kp">

<div id="tekst">

<div style="text-align: justify;">

TUTAJ WKLEJ TEKST</div>

</div>

</div>

</center>