Informacyjne kwadraty

informacja 1

informacja 2

informacja 3

informacja 4

informacja 5

informacja 6

informacja 7

informacja 8

informacja 9

informacja 10

KOD DO EFEKTU:

<center>
<div id="tlo1">
<div class="box1">
informacja 1 </div>
<div class="box2">
informacja 2</div>
<div class="box3">
informacja 3</div>
<div class="box4">
informacja 4</div>
<div class="box5">
informacja 5</div>
<div class="box6">
informacja 6</div>
<div class="box7">
informacja 7</div>
<div class="box8">
informacja 8</div>
<div class="box9">
informacja 9</div>
<div class="box10">
informacja 10</div>
</div>
<style type="text/css">
#tlo1 {
width: SZEROKOŚĆ ZDJĘCIA w px;
   height: WYSOKOŚĆ ZDJĘCIA w px; /*wysokość zdjęcia*/
   background: url("LINK DO ZDJĘCIA");
border: 10px solid #000;
}

.box1 {
background:#000;
padding:7px;
height:10px;
width:10px;
top: 60px;
left: 53px;
overflow:hidden;
color:transparent;
transition: all 0.8s ease;-o-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;
position:absolute;
border-radius: 0px;
border: 0px solid black;}

.box1:hover {
height:10px;
width:200px;
padding: 4px 7px 10px 7px;
z-index:9999;
color:#999;}

.box2 {
background:#000;
padding:7px;
height:10px;
width:10px;
top: 90px;
left: 53px;
overflow:hidden;
color:transparent;
transition: all 0.8s ease;-o-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;
position:absolute;
border-radius: 0px;
border: 0px solid black;}

.box2:hover {
height:10px;
width:200px;
padding: 4px 7px 10px 7px;
z-index:9999;
color:#999;}

.box3 {
background:#000;
padding:7px;
height:10px;
width:10px;
top: 120px;
left: 53px;
overflow:hidden;
color:transparent;
transition: all 0.8s ease;-o-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;
position:absolute;
border-radius: 0px;
border: 0px solid black;}

.box3:hover {
height:10px;
width:200px;
padding: 4px 7px 10px 7px;
z-index:9999;
color:#999;}

.box4 {
background:#000;
padding:7px;
height:10px;
width:10px;
top: 150px;
left: 53px;
overflow:hidden;
color:transparent;
transition: all 0.8s ease;-o-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;
position:absolute;
border-radius: 0px;
border: 0px solid black;}

.box4:hover {
height:10px;
width:200px;
padding: 4px 7px 10px 7px;
z-index:9999;
color:#999;}

.box5 {
background:#000;
padding:7px;
height:10px;
width:10px;
top: 180px;
left: 53px;
overflow:hidden;
color:transparent;
transition: all 0.8s ease;-o-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;
position:absolute;
border-radius: 0px;
border: 0px solid black;}

.box5:hover {
height:10px;
width:200px;
padding: 4px 7px 10px 7px;
z-index:9999;
color:#999;}

.box6 {
background:#000;
padding:7px;
height:10px;
width:10px;
top: 210px;
left: 53px;
overflow:hidden;
color:transparent;
transition: all 0.8s ease;-o-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;
position:absolute;
border-radius: 0px;
border: 0px solid black;}

.box6:hover {
height:10px;
width:200px;
padding: 4px 7px 10px 7px;
z-index:9999;
color:#999;}

.box7 {
background:#000;
padding:7px;
height:10px;
width:10px;
top: 240px;
left: 53px;
overflow:hidden;
color:transparent;
transition: all 0.8s ease;-o-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;
position:absolute;
border-radius: 0px;
border: 0px solid black;}

.box7:hover {
height:10px;
width:200px;
padding: 4px 7px 10px 7px;
z-index:9999;
color:#999;}

.box8 {
background:#000;
padding:7px;
height:10px;
width:10px;
top: 270px;
left: 53px;
overflow:hidden;
color:transparent;
transition: all 0.8s ease;-o-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;
position:absolute;
border-radius: 0px;
border: 0px solid black;}

.box8:hover {
height:10px;
width:200px;
padding: 4px 7px 10px 7px;
z-index:9999;
color:#999;}

.box9 {
background:#000;
padding:7px;
height:10px;
width:10px;
top: 300px;
left: 53px;
overflow:hidden;
color:transparent;
transition: all 0.8s ease;-o-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;
position:absolute;
border-radius: 0px;
border: 0px solid black;}

.box9:hover {height:10px;
width:200px;
padding: 4px 7px 10px 7px;
z-index:9999;
color:#999;}

.box10 {
background:#000;
padding:7px;
height:10px;
width:10px;
top: 330px;
left: 53px;
overflow:hidden;
color:transparent;
transition: all 0.8s ease;-o-transition: all 0.8s ease;-webkit-transition: all 0.8s ease;-moz-transition: all 0.8s ease;
position:absolute;
border-radius: 0px;
border: 0px solid black;}

.box10:hover {
height:10px;
width:200px;
padding: 4px 7px 10px 7px;
z-index:9999;
color:#999;}
</style>
</center>

▪ Wartości, które możesz edytować zaznaczone są kolorem.
▪ Nie edytuj posta z tym kodem inaczej niż poprzez widok HTML.
▪ Jeśli nie wykorzystasz wszystkich kwadratów, możesz skasować odpowiednią liczbę funkcji, np. <div class="box10">informacja 10</div>.