Instrukcje - Pojawiający się tekst

Sophie Cookson

1 5 m a j a | A n g l i a | A k t o r k a

Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi.

Dawno nie było żadnej instrukcji, nie mamy też żadnej specjalistki od HTMLu i kart, dlatego postanowiłam coś sama naskrobać. Efekt stary jak świat i na pewno znany, pojawiający się tekst na obrazku. Mimo wszystko prezentuje się naprawdę wdzięcznie. Ma tylko jedno ograniczenie - nasz tekst nie może być za długi. Ale zajrzyjmy do kodu HTML/CSS.

<div style="text-align: center;">
<span style="font-size: x-large;"></span>&nbsp;</div>
<center class="post-body entry-content" id="post-body-5915247445168291224" itemprop="description articleBody">
<div id="tlo">
<div id="tekst">
<br />
<br />
<br />
<br />
<div align="center" class="MsoNormal" style="text-align: center;">
<span style="font-family: &quot;Palace Script MT&quot;; font-size: 48.0pt; line-height: 115%;">IMIĘ POSTACI<o:p></o:p></span></div>
<div align="center" class="MsoNormal" style="text-align: center;">
<span style="font-family: &quot;Footlight MT Light&quot;,&quot;serif&quot;; font-size: 12.0pt; line-height: 115%;">DANE POSTACI<o:p></o:p></span></div>
<br />
<br />
<div style="margin-left: 20px; margin-right: 20px; text-align: justify;>
<div style="text-align:justify;">
Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque. Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi.</div>
<div style="text-align: justify;">
<br /></div>
<div style="margin-left: 20px; margin-right: 20px; text-align: justify;>
<div style="text-align: justify;">
Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis.</div>
<div style="text-align: justify;">
<br /></div>
</div>
</div>
</div>
<style type="text/css">
div#tlo {
   background: url('LINK DO ZDJĘCIA');
   width:500px; /*szerokość zdjęcia*/
   height:590px; /*wysokość zdjęcia*/
}
div#tekst {
transition:all 2s;
-moz-transition:all 2s; /* Firefox 4 */
-webkit-transition:all 2s; /* Safari i Chrome */
-o-transition:all 2s; /* Opera */
   background:transparent;  /*kolor tła tekstu przed najechaniem myszką*/
   color:transparent;  /*kolor tekstu przed najechaniem myszką*/
   width:500px;  /*szerokość pola tekstowego*/
   height:590px;  /*wysokość pola tekstowego*/
}
div#tekst:hover {
   transition:all 2s;
   -moz-transition:all 2s; /* Firefox 4 */
   -webkit-transition:all 2s; /* Safari i Chrome */
   -o-transition:all 2s; /* Opera */
   background:white;  /*kolor tła tekstu po najechaniu myszką*/
   color:black;  /*kolor tekstu po najechaniu na niego myszką*/
   opacity:.7;  /*przezroczystość*/
}
</style>
</span>
</center>

Wartości zaznaczone kolorami można zmieniać wedle własnej woli.