Animated Windows Metro Boxes using CSS3

Everyone knows that Windows Metro UI is very popular among web developers. Because of its powerful User Interface with nice animations.

Here I am going to tell you how to develop a Animated Metro style UI boxes with CSS3

This Metro Boxes is inspired by Microsoft Windows 8 Operating System – http://metroui.org.ua/

10 popular Metro Style themes for your reference – http://www.jquery4u.com/bootstraps/metro-bootstraps/

This Metro Boxes is Responsive too 🙂

HTML Code/h3>

	<div class="metro-boxes">

      <a class="metro-box blue-gradient wide" href="">

          <div class="metro-box-photo"><img src="1.jpg" alt=""/></div>

          <div class="metro-box-icon"><i class="icon-play"></i></div>

      </a>

      <a class="metro-box blue-gradient normal " href="">

          <div class="metro-box-icon"><i class="icon-facebook"></i></div>

          <div class="metro-box-title"><h5>Facebook</h5></div>

      </a>

      <a class="metro-box yellow-gradient normal " href="">

          <div class="metro-box-icon"><i class="icon-music"></i></div>

          <div class="metro-box-title"><h5>Music</h5></div>

      </a>

       <a class="metro-box red-gradient normal" href="">

          <div class="metro-box-icon"><i class="icon-youtube"></i></div>

          <div class="metro-box-title"><h5>YouTube</h5></div>

      </a>

      <a class="metro-box green-gradient normal" href="">

          <div class="metro-box-icon"><i class="icon-windows"></i></div>

          <div class="metro-box-title"><h5>Windows</h5></div>

      </a>

       <a class="metro-box orange-gradient wide last-in-row" href="">

          <div class="metro-box-photo"><img src="2.jpg" alt=""/></div>

          <div class="metro-box-icon"><i class="icon-camera"></i></div>

      </a>

        <a class="metro-box violet-gradient wide first-in-row" href="">

          <div class="metro-box-icon"><i class="icon-skype"></i></div>

          <div class="metro-box-title"><h5>Skype</h5></div>

      </a>

       <a class="metro-box black-gradient normal " href="">

          <div class="metro-box-icon"><i class="icon-music"></i></div>

          <div class="metro-box-title"><h5>Music</h5></div>

      </a>

       <a class="metro-box red-gradient normal last-in-row" href="">

          <div class="metro-box-icon"><i class="icon-pinterest"></i></div>

          <div class="metro-box-title"><h5>Pinterest</h5></div>

      </a>

    </div>

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

View Demo & Download

Download Script will be available for subscribed members only. If you want this script, please subscribe to my blog and tell me the reason via comment that why do you love this Metro Boxes