Responsive Icon Grid Layout with Only CSS3

Responsive Icon Grid Layout with Only CSS3
File Size: 98.5 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

An awesome grid of icons and text built only with CSS3 that adjusts its number of columns depending on the screen size as shown in some media queries. It also comes with overlay effects on hover to reveal the details of the items.

How to use it:

1. Markup html structure

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

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

This awesome jQuery plugin is developed by MARY LOU. For more Advanced Usages, please check the demo page or visit the official website.