Responsive Icon Grid

A responsive grid of anchors with icons, text and some example hover transitions.
BlueprintResponsiveIconGrid

From our weekly sponsor: Design every part of your website with the brand new Divi Theme Builder. Try it for free.

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>

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;
	}
}

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 25

Comments are closed.
  1. 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.

  2. Cosby sweater…? With milk? Has someone been reading urban dictionary…?

    PS: Love your work! Huge inspiration.

  3. Hey, it is great to see the use of these icons! I participated in the made of this icon font.

  4. Awesome work! Super noob question, but how do you change to another icon from the anyoldicon set?

  5. 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!

  6. Hi! I have the same question. How can I change the icons into photos? ๐Ÿ™‚

  7. Like other tutorials this one really awesome, but i didn’t understand from where all these icons come???

  8. Tee icons are one font, it name is anyoldicon.

    I don not see where you can place your own icons

  9. Congratulations!
    Great design Mary.
    One question:
    โ€“ Is possible change the icons for images?
    In this case how do work this CSS?