Informacyjne kwadraty #2

Informacja pierwsza

Informacja druga

Informacja trzecia

Informacja czwarta

Informacja piąta

Informacja szósta

Informacja siódma

treść karty

<style type="text/css">

.color1 {position:absolute;top:180px;left:60px;} /*odpowiada za położenie kwadratów na zdjęciu*/

.color2 { position:absolute;top:140px;left:60px;} 

.color3 {position:absolute;top:220px;left:60px;} 

.color4 { position:absolute;top:260px;left:60px;} 

.color5 {position:absolute;top:300px;left:60px;} 

.color6 { position:absolute;top:340px;left:60px;} 

.color7 { position:absolute;top:380px;left:60px;} 

.color1:hover, .color2:hover, .color3:hover, .color4:hover, .color5:hover, .color6:hover, .color7:hover    {

width: 250px;

background: #524d4f; /*efekt po rozwinięciu*/

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

padding-left: 25px;

color: #eae5dd  !important;

transition: 0.5s;

}

.small{  

margin-right: 4px;

box-shadow: 0px 0px 0px 3px #6b6c37; /*obramowanie zewnętrzne*/

border: solid 1px #fff;

display: block;

overflow: hidden!important;

margin-left: 2px;

width:25px;

height: 5px;

padding-bottom: 15px; 

padding-top: 5px;

text-transform: uppercase; /*czcionka*/

background: #6b6c37; /*tło kwadratów*/

color: transparent;

text-align: center;

font-size: 12px;

transition: 0.5s;

}

div#kp3 {

width: 500px; /*szerokość zdj*/

height: 540px; /*wysokość zdj*/

margin-left:25px; /*położenie zdjęcia w poście*/

margin-top:-40px;

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#kp3:hover {

-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="kp3">

</div>

</center>

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

</di><br />

<div class="small color1">

Informacja pierwsza</div>

<div class="small color2">

Informacja druga</div>

<div class="small color3">

Informacja trzecia</div>

<div class="small color4">

Informacja czwarta</div>

<div class="small color5">

Informacja piąta</div>

<div class="small color6">

Informacja szósta</div>

<div class="small color7">

Informacja siódma</div>

<div style="margin-top: -50px; text-align: center;">

treść karty</div>