icon menu

by Craig Martin

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<div class="icon-nav">
    <ul class="ca-menu">
        <li>
            <a href="#">
                <span class="ca-icon"><i class="icon-home"></i></span>
                <div class="ca-content">
                    <h2 class="ca-text">Home</h2>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="ca-icon"><i class="icon-heart"></i></span>
                <div class="ca-content">
                    <h2 class="ca-text">Listings</h2>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="ca-icon"><i class="icon-info"></i></span>
                <div class="ca-content">
                    <h2 class="ca-text">About</h2>
                </div>
            </a>
        </li>
        <li>
            <a href="#">
                <span class="ca-icon"><i class="icon-envelope"></i></span>
                <div class="ca-content">
                    <h2 class="ca-text">Contact</h2>
                </div>
            </a>
        </li>
    </ul>
</div>

CSS

.ca-menu {
	padding: 0;
	margin: 0 auto;
	width: 100%;
}
.ca-menu li {
	width: 80px;
	height: 80px;
	overflow: hidden;
	position: relative;
	float: left;
//	background: hsl(182,52%,56%);
	margin-right: 0;
	-webkit-transition: all 300ms linear;
	-moz-transition: all 300ms linear;
	-o-transition: all 300ms linear;
	-ms-transition: all 300ms linear;
	transition: all 300ms linear;
}
.ca-menu li:last-child {
	margin-right: 0px;
}
.ca-menu li a {
	text-align: left;
	width: 100%;
	height: 100%;
	display: block;
	color: hsl(0,0%,20%);
	position: relative;
}
.ca-icon {
//	color: hsl(0,0%,20%);
	font-size: 30px;
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	text-align: center;
	-webkit-transition: all 400ms linear;
	-moz-transition: all 400ms linear;
	-o-transition: all 400ms linear;
	-ms-transition: all 400ms linear;
	transition: all 400ms linear;
}
.ca-content {
	position: absolute;
	left: 0px;
	width: 100%;
	top: 20%;
}
.ca-text {
	font-size: 18px;
	text-align: center;
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}
.ca-menu li:hover {
//	background-color: hsl(192,63%,34%);
}
.ca-menu li:hover .ca-icon {
//	color: hsl(193,100%,73%);
	-webkit-animation: moveFromBottom 300ms ease;
	-moz-animation: moveFromBottom 300ms ease;
	-ms-animation: moveFromBottom 300ms ease;
}
.ca-menu li:hover .ca-text {
//	color: hsl(193,100%,73%);
	-webkit-animation: smallToBig 300ms ease;
	-moz-animation: smallToBig 300ms ease;
	-ms-animation: smallToBig 300ms ease;
}
@-webkit-keyframes smallToBig { from { -webkit-transform: scale(0.1); } to { -webkit-transform: scale(1); } }
@-moz-keyframes smallToBig {
	from {
		-moz-transform: scale(0.1);
	}
	to {
		-moz-transform: scale(1);
	}
}
@-ms-keyframes smallToBig {
	from {
		-ms-transform: scale(0.1);
	}
	to {
		-ms-transform: scale(1);
	}
}

@-webkit-keyframes moveFromBottom {
	from {
		-webkit-transform:...