Wysuwane informacje - kwadraty

Informacja pierwsza

Informacja druga

Informacja trzecia

Informacja czwarta

<center>

<style type="text/css">

.kwadrat1 {position:absolute;top:35px;left:60px; /*położenie*/} 

.kwadrat2 {position:absolute;top:65px;left:60px;} 

.kwadrat3 { position:absolute;top:95px;left:60px;} 

.kwadrat4 { position:absolute;top:125px;left:60px;} 

.kwadrat1:hover,.kwadrat2:hover, .kwadrat3:hover, .kwadrat4:hover, .kwadrat5:hover, .kwadrat6:hover, .kwadrat7:hover {

width: 200px;

border-bottom:2px solid #524d4f; /*obramowania*/

border-top:1px dashed #524d4f;

box-shadow:inset 20px 0 0px 0px #524d4f; /*kolor kwadratu*/

background: transparent;

padding-left: 25px;

text-transform:uppercase; /*drukowane litery*/

text-align:center;

color: #14061b !important; /*czcionka*/

transition: 0.5s;

}

.Dane{  

display: block;

overflow: hidden;

width:20px;

height:15px;

padding-bottom: 3px;

font-family: inherit;

text-transform:uppercase;

box-shadow:inset 20px 0 0px 0px #524d4f; /*kolor kwadratu po najechaniu*/

color: transparent;

font-size:13px;

letter-spacing:2px;

transition: 0.5s;

}

div#postać{

width: 500px;

height: 500px;

background: url('link do zdjęcia) center no-repeat;

transition:all 2s ease-in-out;

-moz-transition:all 2s ease-in-out; /* Firefox 4 */

-webkit-transition:all 2s ease-in-out; /* Safari i Chrome */

-o-transition:all 2s ease-in-out; /* Opera */

}

div#postać:hover {

display:block;

-moz-transition:all 2s ease-in-out; /* Firefox 4 */

-webkit-transition:all 2s ease-in-out; /* Safari i Chrome */

-o-transition:all 2s ease-in-out; /* Opera */}

</style>

<div id="postać">

</div>

</center>

<di style="margin-top: -150px;"> 

</di><br />

<div class="Dane kwadrat1">

Informacja pierwsza</div>

<div class="Dane kwadrat2">

Informacja druga</div>

<div class="Dane kwadrat3">

Informacja trzecia</div>

<div class="Dane kwadrat4">

Informacja czwarta</div>