"Responsive Metro styled news"
Bootstrap 3.3.0 Snippet by Aix77

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="row"> <div class="col-md-12"> <div class="metro-tile-container"> <div class="metro-tile metro-tile-lg"> <div class="metro-tile-page active metro-tile-page-warning"> <h4>Welcome to Responsive Metro Tiles.</h4> </div> <div class="metro-tile-page metro-tile-page-info"> <p> Works in most browsers </p> </div> </div> <div class="metro-tile metro-tile-md"> <div class="metro-tile-page active metro-tile-page-info"> <img src="https://pbs.twimg.com/profile_images/522909800191901697/FHCGSQg0.png" alt="MetroTiles" /> </div> <div class="metro-tile-page metro-tile-page-primary"> <p>Supports Images in single pages</p> </div> </div> <div class="metro-tile metro-tile-md"> <div class="metro-tile-page active metro-tile-page-primary"> <img src="http://www.blogcdn.com/de.engadget.com/media/2012/02/windows-new-logo-thumb-550xauto-84054.jpg" alt="MetroTiles" /> </div> <div class="metro-tile-page metro-tile-page-primary"> <h4> also supports images in multiple pages</h4> <img src="http://www.blogcdn.com/de.engadget.com/media/2012/02/windows-new-logo-thumb-550xauto-84054.jpg" alt="MetroTiles" /> </div> </div> <div class="metro-tile metro-tile-lg"> <div class="metro-tile-page active metro-tile-page-danger"> <h4>Large Tiles</h4> <span class="glyphicon glyphicon-bullhorn"></span> </div> <div class="metro-tile-page metro-tile-page-success"> <p>Different sizes.</p> <p>Small Tiles are not 100% finished.</p> </div> </div> <div class="metro-tile metro-tile-md"> <div class="metro-tile-page active metro-tile-page-primary"> <span class="glyphicon glyphicon-heart"></span> <h4>Medium Tiles</h4> </div> <div class="metro-tile-page metro-tile-page-primary"> <p>Different sizes</p> <p>Small Tiles are not 100% finished.</p> </div> </div> <div class="metro-tile metro-tile-lg"> <div class="metro-tile-page active metro-tile-page-primary"> <span class="glyphicon glyphicon-qrcode"></span> <span class="badge">42</span> <h4>Glyphicon and Badge support</h4> </div> <div class="metro-tile-page metro-tile-page-primary"> <span class="glyphicon glyphicon-inbox"></span> <span class="glyphicon glyphicon-headphones"></span> <span class="glyphicon glyphicon-eye-open"></span> <span class="glyphicon glyphicon-hd-video"></span> </div> </div> </div> </div> </div>
.metro-tile-container { width: 100%; } .metro-tile { float: left; position: relative; padding: 5px; min-height: 1px; overflow: hidden; margin-bottom: 25px; } .metro-tile-sm { height: 90px; width: 25%; } .metro-tile-md { height: 180px; width: 50%; } .metro-tile-lg { height: 180px; width: 100%; } @media (min-width: 992px) { .metro-tile-sm { height: 90px; width: 90px; } .metro-tile-md { height: 180px; width: 175px; } .metro-tile-lg { height: 180px; width: 375px; } } .metro-tile .glyphicon, .metro-tile .badge { padding: 0 25px; float: left; } .metro-tile-sm .glyphicon, .metro-tile-sm .label, .metro-tile-sm .badge { font-size: 20pt; } .metro-tile-md .glyphicon, .metro-tile-md .label, .metro-tile-md .badge { font-size: 40pt; } .metro-tile-lg .glyphicon, .metro-tile-lg .label, .metro-tile-lg .badge { font-size: 80pt; } .metro-tile-page { right: 5px; position: absolute; cursor: pointer; height: 100%; width: 100%; padding: 15px; background-repeat: no-repeat; background-size: cover; background-position: center; } .metro-tile-page.active { display: block; } .metro-tile-page.active h4 { z-index: 100; position: absolute; color: white; bottom: 10%; } .metro-tile-md .metro-tile-page.active h4, .metro-tile-lg .metro-tile-page.active h4 { font-size: 22px; bottom: 10%; } .metro-tile-sm .metro-tile-page.active h4 { font-size: 12px; bottom: 5%; text-align: right; } .metro-tile-page.active img { position: absolute; left: 0; top: 0; } .metro-tile-page-success { color: #fff; background-color: #5cb85c; border-color: #4cae4c; } .metro-tile-page-success .badge { color: #4cae4c; background-color: #fff; } .metro-tile-page-danger { color: #fff; background-color: #d9534f; border-color: #d43f3a; } .metro-tile-page-danger .badge { color: #d9534f; background-color: #fff; } .metro-tile-page-warning { color: #fff; background-color: #f0ad4e; border-color: #eea236; } .metro-tile-page-warning .badge { color: #eea236; background-color: #fff; } .metro-tile-page-info { color: #fff; background-color: #5bc0de; border-color: #46b8da; } .metro-tile-page-info .badge { color: #46b8da; background-color: #fff; } .metro-tile-page-primary { color: #fff; background-color: #428bca; border-color: #357ebd; } .metro-tile-page-primary .badge { color: #357ebd; background-color: #fff; }
$(window).resize(function () { $.each($('.metro-tile-page:not(.active)'), function () { $(this).css('right', ($(this).width() + 30) * -1); }); }); $(document).ready(function () { $.each($(".metro-tile-page"), function (index, tile) { $.each($(tile).children('img'), function (ind, img) { $(tile).css('background-image', 'url(' + $(img).attr('src') + ')'); $(img).hide(); }); }); $.each($('.metro-tile-page:not(.active)'), function () { $(this).css('right', ($(this).width() + 30) * -1); }); $('.metro-tile').hover(function () { $(this).children('.active').clearQueue(); $(this).children(':not(.active)').clearQueue(); $(this).children('.active').animate({ 'right': $(this).width() + 30 }, 500, 'swing'); $(this).children(':not(.active)').animate({ 'right': '5px' }, 500, 'swing'); }, function () { $(this).children('.active').clearQueue(); $(this).children(':not(.active)').clearQueue(); $(this).children(':not(.active)').animate({ 'right': ($(this).width() + 10) * -1 }, 500, 'swing'); $(this).children('.active').animate({ 'right': '5px' }, 500, 'swing'); }); });

Related: See More


Questions / Comments: