<style>
.metro-web-deva { width:980px; }  .metro-web-deva .case {  float: left;  position: relative;  margin: 4px;  padding: 3px;  width: 150px;  height: 80px;  text-decoration: none;  cursor: pointer;  overflow: hidden;  color: #fff;  z-index: 9;  Background:#04aeda;  transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) 0s;  }   
.metro-web-deva .case:hover {  opacity: 0.8;  filter: alpha(opacity=80);  }   
.metro-web-deva .case span {  position: absolute;  left: 5px;  bottom: 5px;  font-size: 17px;  z-index: 8;  }  
.metro-web-deva .case img.label {  position: absolute;  left: 50%;  top: 50%;  margin-left: -32px;  margin-top: -32px;  z-index: 7;  }  
.metro-web-deva .case img.large {  margin-left: 20px;  margin-top: 5px;  }
</style>

<div class="metro-web-deva">  
 
<a class="case" href="#" style="height: 174px;">  
<span>Главная</span>  
<img class="label" src="images/Windows-Metro.png" />  </a>   
 
<a class="case" href="#" style="background: #fd9f13;">  
<span>RSS</span>  
<img class="label" src="images/Rss-Feed-Metro.png" alt="" />  </a>   
 
<a class="case" href="#" style="width:314px;height: 80px; background: #4F4F4F;">  
<span>Автор</span>  
<img class="large" src="images/web-deva1.png" />  </a>   
 
<a class="case" href="#" style="background: #c8312b;">  
<span>YouTube</span>  
<img class="label" src="images/Youtube-Red-Metro.png" alt="" />  </a>   
 
 
<a class="case" href="#">  
<span>Музыка</span>  
<img class="label" src="images/Music-Folder-Metro.png" />  </a>   
 
<a class="case" href="#" style="background: #19bfe5;">  
<span>Twitter</span>  
<img class="label" src="images/Twitter-Bird-Metro.png" alt="" />  </a>   
 
<a class="case" href="#" style="background: #d64136;">  
<span>Google+</span>  
<img class="label" src="images/Google-Metro.png" alt="" />  </a>   
 
<a class="case" href="#" style="background: #8b0189;">  
<span>Видео</span>  
<img class="label" src="images/Videos-Folder-Metro.png" />  </a>
 
</div>