<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/jcoulterdesign/pen/jExQGd?depth=everything&order=popularity&page=20&q=box&show_forks=false" />
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600);
body {
background: #ededeb;
}
body .title {
width: 600px;
margin: 0 auto;
text-align: center;
}
body .title h1 {
margin: 30px 0px 0px 0px;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
color: #3d3d3d;
}
body .title h2 {
margin: 10px 0px 0px 0px;
font-size: 18px;
color: #8B8B8B;
font-weight: 400;
font-family: 'Source Sans Pro', sans-serif;
}
body .ui {
width: 900px;
margin: 0 auto;
margin-top: 50px;
font-family: 'Source Sans Pro', sans-serif;
color: white;
box-shadow: none;
}
body .ui ul {
margin: 0px 30px 10px 0px;
padding: 0;
list-style-type: none;
font-size: 11px;
font-weight: 400;
line-height: 20px;
}
body .ui .drop {
z-index: -3;
opacity: 0;
width: 240px;
height: 10px;
background: #3e8368;
position: absolute;
color: white;
bottom: 0;
padding: 12px 30px 21px 30px;
-webkit-transition-property: bottom,opacity;
transition-property: bottom,opacity;
-webkit-transition-duration: .3s;
transition-duration: .3s;
}
body .ui .drop p {
color: #f8fbfa;
}
body .ui_box {
width: 300px;
height: 220px;
position: relative;
background: #3d3d3d;
float: left;
box-shadow: -1px 0px rgba(255, 255, 255, 0.07);
cursor: pointer;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition-property: background,-webkit-transform;
transition-property: background,-webkit-transform;
transition-property: transform,background;
transition-property: transform,background,-webkit-transform;
-webkit-transition-duration: .3s;
transition-duration: .3s;
}
body .ui_box__inner {
padding: 30px;
}
body .ui_box__inner span {
font-size: 36px;
font-weight: 700;
}
body .ui_box__inner .progress {
width: 100%;
margin-top: 10px;
height: 6px;
background: rgba(0, 0, 0, 0.3);
margin-bottom: 15px;
}
body .ui_box__inner .progress_graph {
float: right;
border-bottom: 1px solid rgba(255, 255, 255, 0.09);
width: 85px;
text-align: center;
position: relative;
padding-left: 20px;
top: 24px;
}
body .ui_box__inner .progress_graph__bar--1 {
width: 10px;
height: 20px;
background: #4FA584;
float: left;
margin-right: 10px;
position: relative;
bottom: -10px;
-webkit-animation: graph 1s;
}
body .ui_box__inner .progress_graph__bar--2 {
width: 10px;
-webkit-animation: graph2 1s;
height: 30px;
float: left;
margin-right: 10px;
background: #4FA584;
}
body .ui_box__inner .progress_graph__bar--3 {
width: 10px;
height: 24px;
margin-right: 10px;
-webkit-animation: graph3 1s;
background: #4FA584;
float: left;
position: relative;
bottom: -6px;
}
body .ui_box__inner .progress_graph__bar--4 {
width: 10px;
height: 14px;
-webkit-animation: graph4 1s;
bottom: -16px;
position: relative;
background: #4FA584;
float: left;
}
body .ui_box__inner .progress_bar {
height: 6px;
float: left;
width: 58%;
background: #4FA584;
-webkit-animation: bar 2s;
}
body .ui_box__inner .progress_bar--two {
height: 6px;
float: left;
width: 78%;
background: #4FA584;
-webkit-animation: bar2 2s;
}
body .ui_box h2 {
font-weight: normal;
font-size: 16px;
margin: -4px 0px 3px 0px;
}
body .ui_box p {
font-size: 11px;
color: #b6b6b6;
clear: left;
font-weight: 300;
width: 160px;
margin: 2px 0px 15px 0px;
}
body .ui_box:hover {
background: #4FA584;
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition-property: background,-webkit-transform;
transition-property: background,-webkit-transform;
transition-property: transform,background;
transition-property: transform,background,-webkit-transform;
-webkit-transition-duration: .3s;
transition-duration: .3s;
position: relative;
z-index: 1;
}
.ui_box:hover > .ui_box__inner p {
color: #b3dacb;
}
.ui_box:hover > .drop {
-webkit-transition-property: bottom,opacity;
transition-property: bottom,opacity;
-webkit-transition-duration: .3s;
transition-duration: .3s;
bottom: -42px;
opacity: 1;
}
.ui_box:hover > .drop .arrow {
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transform: rotate(765deg);
transform: rotate(765deg);
}
.ui_box:hover > .ui_box__inner .progress_graph > div {
background: white;
}
.ui_box:hover > .ui_box__inner .progress .progress_bar, .ui_box:hover > .ui_box__inner .progress .progress_bar--two {
background: white;
}
.stat_left {
float: left;
}
.arrow {
width: 4px;
height: 4px;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
-webkit-transition-duration: 1s;
transition-duration: 1s;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
border-top: 1px solid #CDEAD3;
border-right: 1px solid #CDEAD3;
float: right;
position: relative;
top: -24px;
right: 0px;
}
@-webkit-keyframes bar {
from {
width: 0px;
}
to {
width: 58%;
}
}
@keyframes bar {
from {
width: 0px;
}
to {
width: 58%;
}
}
@-webkit-keyframes bar2 {
from {
width: 0px;
}
to {
width: 78%;
}
}
@keyframes bar2 {
from {
width: 0px;
}
to {
width: 78%;
}
}
@-webkit-keyframes graph {
from {
height: 0px;
}
to {
height: 20px;
}
}
@keyframes graph {
from {
height: 0px;
}
to {
height: 20px;
}
}
@-webkit-keyframes graph2 {
from {
height: 0px;
}
to {
height: 30px;
}
}
@keyframes graph2 {
from {
height: 0px;
}
to {
height: 30px;
}
}
@-webkit-keyframes graph3 {
from {
height: 0px;
}
to {
height: 24px;
}
}
@keyframes graph3 {
from {
height: 0px;
}
to {
height: 24px;
}
}
@-webkit-keyframes graph4 {
from {
height: 0px;
}
to {
height: 13px;
}
}
@keyframes graph4 {
from {
height: 0px;
}
to {
height: 13px;
}
}
</style></head><body>
<div class='title'>
<h1>
Swagtastic UI Stat Pop out
</h1>
<h2>
Hover over each stat. Pure CSS...of course!
</h2>
</div>
<div class='ui'>
<div class='ui_box'>
<div class='ui_box__inner'>
<h2>
Conversion Rate
</h2>
<p>Lorem ipsum dolor sit amet</p>
<div class='stat'>
<span>58%</span>
</div>
<div class='progress'>
<div class='progress_bar'></div>
</div>
<p>Lorem ipsum dolor sit amet. Some more super groovy information about this stat.</p>
</div>
<div class='drop'>
<p>Take a closer look</p>
<div class='arrow'></div>
</div>
</div>
<div class='ui_box'>
<div class='ui_box__inner'>
<h2>
Sales By Type
</h2>
<p>Lorem ipsum dolor sit amet</p>
<div class='stat_left'>
<ul>
<li>
Electical
</li>
<li>
Clothing
</li>
<li>
Entertainment
</li>
<li>
Kitchen
</li>
</ul>
</div>
<div class='progress_graph'>
<div class='progress_graph__bar--1'></div>
<div class='progress_graph__bar--2'></div>
<div class='progress_graph__bar--3'></div>
<div class='progress_graph__bar--4'></div>
</div>
<p>Lorem ipsum dolor sit amet. Some more super groovy information.</p>
</div>
<div class='drop'>
<p>Take a closer look</p>
<div class='arrow'></div>
</div>
</div>
<div class='ui_box'>
<div class='ui_box__inner'>
<h2>
Total Sales
</h2>
<p>Lorem ipsum dolor sit amet</p>
<div class='stat'>
<span>$34,403.93</span>
</div>
<div class='progress'>
<div class='progress_bar--two'></div>
</div>
<p>Lorem ipsum dolor sit amet. Some more super groovy information about this stat.</p>
</div>
<div class='drop'>
<p>Take a closer look</p>
<div class='arrow'></div>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >/* Nope, not today */
//# sourceURL=pen.js
</script>
</body></html>
