css fluid motion of links by web4college

When a user hovers the mouse over navigation bar. The links represent a fluid type motion. In this case, float, display and zoom properties are used to make a nabigation bar that has represents zoom effect.

We'll perform the following steps to complete the project.

Example

Step-1

Firstly, we'll make a navigation bar.

Example

<style>
#zoom ul{
 list-style-type:none;
 display:block;
 background:rgba(200,200,200,0.5);
 padding:10px;
 width:auto;
 height:auto;
 border-radius:8px;
 float:left;
}
</style>
Try </>

list-style-type:none; removes the list item markers from the list.
padding is the distance between list items (li) and the boundary of this box (ul element).
width and height properties should be set to auto.
float:left; must be used so that it covers the links completely.

Step-2

The list items are block level elements. But list items can float in a line afterwards.

Example

<style>
#zoom ul li{
float:left;
}
</style>
Try </>

float:left; property aligns the list items on the left side.

Step-3

Example

<style>
#zoom ul li a{
display:block;
text-decoration:none;
width:60px;
height:60px;
background-color:rgba(150,150,150,0.7);
color:white;
border-radius:10px;
line-height:60px;
vertical-align:middle;
text-align:center;
margin:1px;
}
</style>
Try </>

text-decoration:none; removes the line under the text.
padding:20px; is the padding between anchor text and the link boundary.

Step-3

When a user hovers the mouse over the link, that link shows a zoom-in effect.

Example

<style>
#zoom ul li a:hover{
 zoom:150%;
}
</style>
Try </>