"grid brand"
Bootstrap 3.0.0 Snippet by je398

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/mkbatman/pen/JdwNbL?limit=all&page=31&q=partial" /> <style class="cp-pen-styles">#allLogos { position: relative; width: 60%; margin:auto; z-index: 300; } .textSP { overflow: hidden; width: 150px; background-color: #ddd; position: absolute; height: 20px; color: #557; font-weight: 600; text-align: center; top: 152px; opacity: 1; -webkit-transition: all 0.2s ease-in 1s; -moz-transition: all 0.2s ease-in 1s; -o-transition: all 0.2s ease-in 1s; } .ARTICLE { overflow: hidden; border: 1px solid rgb(217, 217, 217); display: block; float: left; height: 150px; position: relative; width: 150px; margin: 5px 5px 5px 5px; padding: 0px 0px 0px 0px; } img.topClientImage, img.botClientImage { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; display: block; height: 145px; left: 1px; position: absolute; top: 1px; width: 145px; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; } .ARTICLE:hover .textSP { top: 130px; opacity: 1; } img.topClientImage:hover { opacity: 0; -webkit-transform: rotate(0); -moz-transform: rotate(0); transform: rotate(0); } img.botClientImage:hover { opacity: 1; } .botClientImage { opacity: 0; } .topClientImage { opacity: .2; } .come-in { transform: translateY(5px); opacity: 1; animation: come-in 2s ease forwards; } .come-in:nth-child(odd) { animation-duration: 2s; } .come-in:hover { box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, .1); transform: translate3d(0, 7px,0) } @keyframes come-in { from { opacity : 0; top : 5px; } to { opacity : 1; top : 0; } } </style></head><body> <div id="allLogos"> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_abrax.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_abrax.png" alt="Adobe" /><span class="textSP">2010 UK - p:2</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_arab.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_arab.png" alt="Adobe" /><span class="textSP">2008 FIN - p:1</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_bhf.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_bhf.png" alt="Adobe" /><span class="textSP">logos_bhf.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_bupa.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_bupa.png" alt="Adobe" /><span class="textSP">logos_bupa.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_cis.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_cis.png" alt="Adobe" /><span class="textSP">logos_cis.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_cmpq.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_cmpq.png" alt="Adobe" /><span class="textSP">logos_cmpq.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_cp.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_cp.png" alt="Adobe" /><span class="textSP">logos_cp.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_dbank.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_dbank.png" alt="Adobe" /><span class="textSP">logos_dbank.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_exel.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_exel.png" alt="Adobe" /><span class="textSP">logos_exel.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_fin.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_fin.png" alt="Adobe" /><span class="textSP">logos_fin.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_fjust.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_fjust.png" alt="Adobe" /><span class="textSP">logos_fjust.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_ge.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_ge.png" alt="Adobe" /><span class="textSP">logos_ge.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_gsk.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_gsk.png" alt="Adobe" /><span class="textSP">logos_gsk.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_hoe.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_hoe.png" alt="Adobe" /><span class="textSP">logos_hoe.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_ibm.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_ibm.png" alt="Adobe" /><span class="textSP">logos_ibm.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_icos.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_icos.png" alt="Adobe" /><span class="textSP">logos_icos.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_idv.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_idv.png" alt="Adobe" /><span class="textSP">logos_idv.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_iv.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_iv.png" alt="Adobe" /><span class="textSP">logos_iv.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_ls.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_ls.png" alt="Adobe" /><span class="textSP">logos_ls.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_lttp.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_lttp.png" alt="Adobe" /><span class="textSP">logos_lttp.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_mtv3.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_mtv3.png" alt="Adobe" /><span class="textSP">logos_mtv3.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_nok.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_nok.png" alt="Adobe" /><span class="textSP">logos_nok.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_nov.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_nov.png" alt="Adobe" /><span class="textSP">logos_nov.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_pwc.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_pwc.png" alt="Adobe" /><span class="textSP">logos_pwc.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_rl.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_rl.png" alt="Adobe" /><span class="textSP">logos_rl.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_roch.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_roch.png" alt="Adobe" /><span class="textSP">logos_roch.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_row.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_row.png" alt="Adobe" /><span class="textSP">logos_row.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_rr.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_rr.png" alt="Adobe" /><span class="textSP">logos_rr.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_rspca.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_rspca.png" alt="Adobe" /> <span class="textSP">logos_rspca.png</span> </article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_rt.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_rt.png" alt="Adobe" /> <span class="textSP">logos_rt.png</span> </article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_ruag.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_ruag.png" alt="Adobe" /><span class="textSP">logos_ruag.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_san.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_san.png" alt="Adobe" /> <span class="textSP">logos_san.png</span> </article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_sanofi.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_sanofi.png" alt="Adobe" /><span class="textSP">logos_sanofi.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_sc.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_sc.png" alt="Adobe" /> <span class="textSP">logos_sc.png</span> </article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_sem.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_sem.png" alt="Adobe" /> <span class="textSP">logos_sem.png</span> </article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_sonera.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_sonera.png" alt="Adobe" /><span class="textSP">logos_sonera.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_st.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_st.png" alt="Adobe" /> <span class="textSP">logos_st.png</span> </article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_thre.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_thre.png" alt="Adobe" /><span class="textSP">logos_thre.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_trhs.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_trhs.png" alt="Adobe" /><span class="textSP">logos_trhs.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_undo.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_undo.png" alt="Adobe" /><span class="textSP">logos_undo.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_unil.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_unil.png" alt="Adobe" /><span class="textSP">logos_unil.png</span></article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_v.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_v.png" alt="Adobe" /> <span class="textSP">logos_v.png</span> </article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_va.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_va.png" alt="Adobe" /> <span class="textSP">logos_va.png</span> </article> <article class="ARTICLE"><img class="topClientImage" src="http://appsavvy.net/logos/baw/logos_wh.jpg" alt="Adobe" id="IMG_4" /><img class="botClientImage" src="http://appsavvy.net/logos/logos_wh.png" alt="Adobe" /> <span class="textSP">logos_wh.png</span> </article> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >(function($) { /** * Copyright 2012, Digital Fusion * Licensed under the MIT license. * http://teamdf.com/jquery-plugins/license/ * * @author Sam Sehnert * @desc A small plugin that checks whether elements are within * the user visible viewport of a web browser. * only accounts for vertical position, not horizontal. */ $.fn.visible = function(partial) { var $t = $(this), $w = $(window), viewTop = $w.scrollTop(), viewBottom = viewTop + $w.height(), _top = $t.offset().top, _bottom = _top + $t.height(), compareTop = partial === true ? _bottom : _top, compareBottom = partial === true ? _top : _bottom; return compareBottom <= viewBottom && compareTop >= viewTop; }; })(jQuery); var win = $(window); var allMods = $(".ARTICLE"); allMods.each(function(i, el) { var el = $(el); if (el.visible(true)) { // el.addClass("already-visible"); el.addClass("come-in") } else { if (el.hasClass("already-visible")) { console.log("yes"); } else { console.log("no"); } } }); win.scroll(function(event) { allMods.each(function(i, el) { var el = $(el); if (el.visible(true)) { el.addClass("come-in"); } else { if (el.hasClass("come-in")) { el.removeClass("come-in"); } else { //console.log("no"); } } }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Paper Kit 2
Pinterest-like Responsive Grid
Grid Columns Divider
Bootstrap Editable jQuery Grid

Questions / Comments: