brite/sample/draw/css/Dock.css

DOM Centric Minimalistic MVC Framework

.Dock{
  position: absolute;
  bottom: 2px;
  left: 10%;
  right: 10%;
  height: 65px; 
}

.Dock-inner{
  position: relative;
  width: 250px;
  height: 65px;
  margin: 0 auto 0 auto;
}

.Dock-bar{
   position: absolute;
   right: 0; bottom: 0; left: 0;
   height: 30px; 
}

.Dock-bar canvas{
  position: absolute;
}   

.Dock-items{
  position: absolute;
  margin: 0 30px 0 30px;
}

.Dock-item{
  float: left; 
  position: relative;
  margin: 0 20px 20px 20px; 
  width: 48px;
  height: 48px;
  -webkit-transition: all .2s; /* Safari and Chrome */
}



.Dock-item > img{
  position: absolute;
  top: 0; left: 0;
  -webkit-transition: all .2s; /* Safari and Chrome */
  width: 48px;
  height: 48px;
  z-index: 100;
}

.Dock-item > label{
  display: none;
  position: absolute;
  top: -1.2em; left: 0; right: 0;
  color: #fff;  
  text-align: center;
}

.Dock-item:hover > label{
  display: block;
}

.Dock-item:hover > img{
  width: 64px;
  height: 64px;
}

.Dock-item:hover{
  width: 64px;
  height: 64px;
  margin-left: 2px;
  margin-top: -8px; 
}