Wysuwane informacje - kółka

Informacja pierwsza

Informacja druga

Informacja trzecia

Informacja czwarta

Informacja piąta

Informacja szósta

Informacja siódma

<center>

<style type="text/css">

.koło1 {position:absolute;top:25px;} 

.koło2 {position:absolute;top:60px;} 

.koło3 { position:absolute;top:95px;} 

.koło4 { position:absolute;top:130px;} 

.koło5 { position:absolute;top:165px;} 

.koło6 { position:absolute;top:200px;} 

.koło7 {position:absolute;top:235px;} 

.koło1:hover,.koło2:hover, .koło3:hover, .koło4:hover, .koło5:hover, .koło6:hover, .koło7:hover, .koło8:hover  {

width: 190px!important;

background: #524d4f;

box-shadow: 0px 0px 0px 0px #524d4f;

border:0px dashed #fff;

border-radius: 0px;

color: #fff;

font-size:12px;

padding-top:2px!important;

text-align:center;

letter-spacing:1px;

transition: 0.5s;

}

.Dane1{  

display: block;

margin: 5px;

width: 20px;

margin-left:50px;

overflow: hidden;

text-transform:uppercase;

font-family:catamaran;

color: transparent;

height: 20px;

margin-bottom:-11px!important;

border-radius:100% ;

background:#524d4f!important;

box-shadow: 0px 0px 0px 2px #524d4f;

border: dashed 2px #fff;

transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

}

div#postać1{

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ć1: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ć1">

</div>

</center>

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

</di><br />

<div class="Dane1 koło1">

Informacja pierwsza</div>

<div class="Dane1 koło2">

Informacja druga</div>

<div class="Dane1 koło3">

Informacja trzecia</div>

<div class="Dane1 koło4">

Informacja czwarta</div>

<div class="Dane1 koło5">

Informacja piąta </div>

<div class="Dane1 koło6">

Informacja szósta </div>

<div class="Dane1 koło7">

Informacja siódma</div>

<br/>

<div class="separator" style="clear: both; text-align: center;">

</div>