From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
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? Subscribe and get our Collective newsletter twice a tweek.
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; } }
Hi, Mary just wanted to thank you for your amazing articles. I would have dropped web designing long ago if it were not for your posts. Your posts just raise the standard of web design every time. Thanks a lot and keep posting great articles for us.
Svaka Cast 😀
Cosby sweater…? With milk? Has someone been reading urban dictionary…?
PS: Love your work! Huge inspiration.
Hey, it is great to see the use of these icons! I participated in the made of this icon font.
Wow it nice idea for me.
Thank you so much, this is beautiful! 🙂
Can someone please tell me, how to change the icons to pictures?
Awesome work! Super noob question, but how do you change to another icon from the anyoldicon set?
Try Fontforge – a free font editor, and then regenerate them using Fontsquirrel.com You may need images in vector format, like SVG
LUSH….
Hello Codrops World,
I am running into a problem trying to get this amazing css function to work – modernizr and the css to load in WordPress.
I tried many things like adding scripts to the header, registering and enqueing the modernizr.custom.js file. I also added . And none of these options worked. I am just learning about modernizr and am truly stuck. Any help is appreciated.
Below are the ways to include js and css into WordPress without using Enqueing (which is the proper way).
<script type="text/javascript" src="/modernizr.custom.js”>
<link rel="stylesheet" type="text/css" href="/css/component.css” media=”screen” />
I keep getting a 404 error or “Resource interpreted as Script but transferred with MIME type text/plain” (used plugin to fix but did not help). If
anyone can give a little guidance or direction it would be much appreciated. This is also my first time posting so if you need any more info from me please let me know.
I LOVE THIS SITE!
Hi! I have the same question. How can I change the icons into photos? 🙂
Like other tutorials this one really awesome, but i didn’t understand from where all these icons come???
Tee icons are one font, it name is anyoldicon.
I don not see where you can place your own icons
Anyone know why I’m receiving a 403 error on the modernizr file?
Hie Mary
Great work great trutorials really loved the designs 🙂
Hi Mary, thanx for the template. Its a nice one. How can I change the icons..?
thanks! could definitely use this!
Wonderful Article! Thank you for the template :))
Congratulations!
Great design Mary.
One question:
– Is possible change the icons for images?
In this case how do work this CSS?
I just like to say thank you Mary !
You’re as amazing as your articles…
Thanks
So there was a little annoying font smoothing thing happening with safari during the transitions – basically upon hover, the font would change thickness a little then settle back down once the transition had finished.
After a little googling this handy post on stack overflow solved it
http://stackoverflow.com/questions/12502234/how-to-prevent-webkit-text-rendering-change-during-css-transition
You I just placed they following in the body css style so it now looks like this
body { /* disables that annoying font transition smoothing with safari!!! */ -webkit-transform: translateZ(0px); font-family: 'Roboto', Calibri, Arial, sans-serif; color: #47a3da; }
Excelent Article. The same cuestion, How can I change the icons..? Thanks.
You can use font awesome, just replace the classes.
Could you please explain how to do this using a code sample? The classes that they are using are custom and do not use the format that FontAwesome does.