ZGEeQM

index.html

<main>
  
  <div class="centered login">
     <div class="dock_left"></div>
<div class="dock">
<ul>
    <li><a href="http://techumber.com/"><img src="http://placekitten.com/490/490" alt="Tools"></a></li>
  
    <li><a href="http://techumber.com/"><img src="http://demo.techumber.com/MackDockWithCSS3/icons/apple.png" alt="Tools"></a></li>
  
    <li><a href="http://techumber.com/"><img src="http://demo.techumber.com/MackDockWithCSS3/icons/apple.png" alt="Tools"></a></li>
</ul>
</div>
<div class="dock_right"></div>
  </div>
  
</main>

style.css

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

html { 
  background: url(http://p1.pichost.me/640/66/1912532.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.login{
	display: block;
	margin:auto;
	padding:40px 40px 30px;
	position: absolute;
	background-color:#f8f8f8;
	background-image:-webkit-linear-gradient(top, #f0f0f0, #ddd);
  background-image:-moz-linear-gradient(top, #f0f0f0, #ddd);
  background-image:linear-gradient(top, #f0f0f0, #ddd);
	border-radius:5px;
	border:#fff 1px solid;
	box-shadow: rgba(0,0,0,0.5) 0px 3px 20px;
	text-align: center;
}

.dock ul{
display: inline-block;
float: left;
width: auto;
margin: 0px;
padding: 0px;
list-style: none;
background: rgba(0, 0, 0, 0.3);
padding-right: 76px;
}
.dock ul li {
width: auto;
height: auto;
display: inline-block;
bottom: 0;
vertical-align: bottom;
margin-top: -43px;
}
.dock ul li a {
display: block;
height: 100px;
width: 100px;
position: relative;
-webkit-transition-property: width, height,margin-top;
-webkit-transition-duration: 0.5s;
-o-transition-property: width, height,margin-top;
-o-transition-duration: 0.5s;
-moz-transition-property: width, height,margin-top;
-moz-transition-duration: 0.5s;
}
.dock ul li a:hover {
width: 150px;
height: 150px;
margin-top: -50px;
}
.dock ul li a img {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
border: none;
padding: 0px 0px 0px 30px;
}
.dock_left{
width: 31px;
-webkit-transform: rotate(33deg);
-moz-transform: rotate(33deg);
-o-transform: rotate(33deg);
position: relative;
background: #EEE;
overflow: hidden;
float: left;
height: 100px;
z-index: 2;
margin: -18px;
}
.dock_right{
width: 36px;
-webkit-transform: rotate(-33deg);
-moz-transform: rotate(-33deg);
-o-transform: rotate(-33deg);
position: relative;
background: #EEE;
overflow: hidden;
float: left;
height: 100px;
z-index: 2;
margin: -18px;
}

ZGEeQM.markdown

ZGEeQM

A Pen by Ryan Knutson on CodePen.

License.