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.

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

Was this article helpful?

 

Email:

Message: