Free course recommendation: Master JavaScript animation with GSAP through 34 free video lessons, step-by-step projects, and hands-on demos. Enroll now β
A grid of icons and text that adjusts its number of columns depending on the screen size as shown in some media queries. Some example effects are used for animating the elements on hover.
The HTML
<ul class="cbp-ig-grid"> <li> <a href="#"> <span class="cbp-ig-icon cbp-ig-icon-shoe"></span> <h3 class="cbp-ig-title">Squid voluptate</h3> <span class="cbp-ig-category">Fashion</span> </a> </li> <li> <a href="#"> <span class="cbp-ig-icon cbp-ig-icon-ribbon"></span> <h3 class="cbp-ig-title">Mixtape lo-fi</h3> <span class="cbp-ig-category">Design</span> </a> </li> <li> <a href="#"> <span class="cbp-ig-icon cbp-ig-icon-milk"></span> <h3 class="cbp-ig-title">Cosby sweater</h3> <span class="cbp-ig-category">Lifestyle</span> </a> </li> <li> <a href="#"> <span class="cbp-ig-icon cbp-ig-icon-whippy"></span> <h3 class="cbp-ig-title">Commodo</h3> <span class="cbp-ig-category">Food</span> </a> </li> <li> <a href="#"> <span class="cbp-ig-icon cbp-ig-icon-spectacles"></span> <h3 class="cbp-ig-title">Bitters kitsch</h3> <span class="cbp-ig-category">Gadgets</span> </a> </li> <li> <a href="#"> <span class="cbp-ig-icon cbp-ig-icon-doumbek"></span> <h3 class="cbp-ig-title">Austin proident</h3> <span class="cbp-ig-category">Music</span> </a> </li> </ul>
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Check out our Collective and stay in the loop.
The CSS
@font-face { font-family: 'anyoldicon'; src:url('../fonts/anyoldicon/anyoldicon.eot'); src:url('../fonts/anyoldicon/anyoldicon.eot?#iefix') format('embedded-opentype'), url('../fonts/anyoldicon/anyoldicon.woff') format('woff'), url('../fonts/anyoldicon/anyoldicon.ttf') format('truetype'), url('../fonts/anyoldicon/anyoldicon.svg#anyoldicon') format('svg'); font-weight: normal; font-style: normal; } /* General grid styles */ .cbp-ig-grid { list-style: none; padding: 0 0 50px 0; margin: 0; } /* Clear floats */ .cbp-ig-grid:before, .cbp-ig-grid:after { content: " "; display: table; } .cbp-ig-grid:after { clear: both; } /* grid item */ .cbp-ig-grid li { width: 33%; float: left; height: 420px; text-align: center; border-top: 1px solid #ddd; } /* we are using a combination of borders and box shadows to control the grid lines */ .cbp-ig-grid li:nth-child(-n+3){ border-top: none; } .cbp-ig-grid li:nth-child(3n-1), .cbp-ig-grid li:nth-child(3n-2) { box-shadow: 1px 0 0 #ddd; } /* anchor style */ .cbp-ig-grid li > a { display: block; height: 100%; color: #47a3da; -webkit-transition: background 0.2s; -moz-transition: background 0.2s; transition: background 0.2s; } /* the icon with pseudo class for icon font */ .cbp-ig-icon { padding: 30px 0 0 0; display: block; -webkit-transition: -webkit-transform 0.2s; transition: -moz-transform 0.2s; transition: transform 0.2s; } .cbp-ig-icon:before { font-family: 'anyoldicon'; font-size: 14em; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; } .cbp-ig-icon-shoe:before { content: "e000"; } .cbp-ig-icon-ribbon:before { content: "e001"; } .cbp-ig-icon-milk:before { content: "e002"; } .cbp-ig-icon-whippy:before { content: "e003"; } .cbp-ig-icon-spectacles:before { content: "e004"; } .cbp-ig-icon-doumbek:before { content: "e007"; } /* title element */ .cbp-ig-grid .cbp-ig-title { margin: 20px 0 10px 0; padding: 20px 0 0 0; font-size: 2em; position: relative; -webkit-transition: -webkit-transform 0.2s; -moz-transition: -moz-transform 0.2s; transition: transform 0.2s; } .cbp-ig-grid .cbp-ig-title:before { content: ''; position: absolute; background: #47a3da; width: 160px; height: 6px; top: 0px; left: 50%; margin: -10px 0 0 -80px; -webkit-transition: margin-top 0.2s; /* top or translate does not seem to work in Firefox */ -moz-transition: margin-top 0.2s; transition: margin-top 0.2s; } .cbp-ig-grid .cbp-ig-category { text-transform: uppercase; display: inline-block; font-size: 1em; letter-spacing: 1px; color: #fff; -webkit-transform: translateY(10px); -moz-transform: -moz-translateY(10px); -ms-transform: -ms-translateY(10px); transform: translateY(10px); opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; -moz-transition: -moz-transform 0.3s, opacity 0.2s; -webkit-transition: transform 0.3s, opacity 0.2s; } .cbp-ig-grid li:hover .cbp-ig-category, .touch .cbp-ig-grid li .cbp-ig-category { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } /* Hover styles */ .cbp-ig-grid li > a:hover { background: #47a3da; } .cbp-ig-grid li > a:hover .cbp-ig-icon { -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } .cbp-ig-grid li > a:hover .cbp-ig-icon:before, .cbp-ig-grid li > a:hover .cbp-ig-title { color: #fff; } .cbp-ig-grid li > a:hover .cbp-ig-title { -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } .cbp-ig-grid li > a:hover .cbp-ig-title:before { background: #fff; margin-top: 80px; } @media screen and (max-width: 62.75em) { .cbp-ig-grid li { width: 50%; } /* reset the grid lines */ .cbp-ig-grid li:nth-child(-n+3){ border-top: 1px solid #ddd; } .cbp-ig-grid li:nth-child(3n-1), .cbp-ig-grid li:nth-child(3n-2) { box-shadow: none; } .cbp-ig-grid li:nth-child(-n+2){ border-top: none; } .cbp-ig-grid li:nth-child(2n-1) { box-shadow: 1px 0 0 #ddd; } } @media screen and (max-width: 41.6em) { .cbp-ig-grid li { width: 100%; } .cbp-ig-grid li:nth-child(-n+2){ border-top: 1px solid #ddd; } .cbp-ig-grid li:nth-child(2n-1) { box-shadow: none } .cbp-ig-grid li:first-child { border-top: none; } } @media screen and (max-width: 25em) { .cbp-ig-grid { font-size: 80%; } .cbp-ig-grid .cbp-ig-category { margin-top: 20px; } }