Wysuwane informacje - kółeczka

Informacja pierwsza

Informacja druga

Informacja trzecia

Informacja czwarta

Informacja piąta

<center>

<style type="text/css">

.okrąg1{

cursor:pointer;

display: block;

width: 22px;

margin-bottom:7px;

height: 22px;

background :#352826; /*kolor tła*/

border: solid 3px #352826; /*nie ruszać*. Kolor taki jak tło*/

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; 

     border-radius: 50% ;}

.Informacje1{

width: 185px; /*szerokość rozwijanego tła*/

position: absolute;

color:transparent !important;

background: transparent;

padding: 4px 0px 4px 0px;

font-family: Trebuchet MS; /*czcionka*/

text-align:center;

font-size:12px; /*rozmiar czcionki*/

letter-spacing:2px; /*odległość między literami*/

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

text-decoration: none;

display:inline-block;

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; 

}

.Informacje1{

margin: 1px 0 0 40px; }

.okrąg1:hover{

background :#6b6c37; /*kolor kółeczka po najechaniu*/

border: solid 3px #6b6c37 ; 

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;  

}

.okrąg1:hover .Informacje1{

box-shadow: inset 190px 0px 0px #6b6c37; /*kolor tła po najechaniu*/

color:#fff !important;  

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; 

border-radius: 0px ; 

}

.okrąg1 {

position: relative ;

z-index: 10000 ;

top: -470px ; /*na jakiej wysokości ma pojawić się kółko*/

left: 50px; /*położenie kółka*/

  }

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><br />

<div class="okrąg1"><div class="Informacje1">Informacja pierwsza</div></div>

<div class="okrąg1"><div class="Informacje1">Informacja druga</div></div>

<div class="okrąg1"><div class="Informacje1">Informacja trzecia</div></div>

<div class="okrąg1"><div class="Informacje1">Informacja czwarta</div></div>

<div class="okrąg1"><div class="Informacje1">Informacja piąta</div></div>

<br/>