HTML |
---|
<style> .metro-web-deva { width:100%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: 13px17px; 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> |
HTML |
---|
<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> <a class="case" href="#" style="background: #8b0189;"> <span>Видео</span> <img class="label" src="images/Videos-Folder-Metro.png" /> </a> <a class="case" href="#" style="background: #8b0189;"> <span>Видео</span> <img class="label" src="images/Videos-Folder-Metro.png" /> </a> </div> |