<div class='title'>
<h1>
HOVER HCI
</h1>
</div>
<br><br>
<div class='ui'>
<div class='ui_box white'>
<div class='ui_box__inner'>
<h2>
Heading
</h2>
<p>And maybe one line of related information</p>
<div class='stat'>
<span>58%</span>
</div>
<div class='progress'>
<div class='progress_bar'></div>
</div>
<p>If you are interested in knowing more , we will give you an option to re-direct. Otherwise we save on screen real estate.</p>
</div>
<div class='drop'>
<p>This is a reward for showing explicit interest</p>
<div class='arrow'></div>
</div>
</div>
<div class='ui_box white'>
<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--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 white'>
<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>
@import url(https://fonts.googleapis.com/css?family=Raleway);
$background:#4FA584;
body{
background:radial-gradient(#fff, #c1c1c1);
height: 120vh;
.title{
position:absolute;
top:75px;
h1{
margin:40px 0px 0px 0px;
font-family: 'poppins', sans-serif;
color: #3d3d3d;
font-size:10em;
background:none;
font-weight:black;
border:none;
text-shadow: -25px 0px 2px #c1c1c1;
}
h2{
margin:10px 0px 0px 0px;
font-size:18px;
color: #8B8B8B;
font-weight:400;
font-family: 'Raleway', sans-serif;
}
}
.ui{
width:900px;
margin:0 auto;
margin-top:300px;
font-family: 'Raleway', sans-serif;
color:white;
box-shadow:none;
box-shadow:0px 0px 5px 0px 2e2e2e;
ul{
margin:0px 30px 10px 0px;
padding:0;
list-style-type:none;
font-size:11px;
font-weight:400;
line-height:20px;
}
.drop{
z-index:-999;
opacity:0;
width: 240px;
height: 25px;
background: darken($background,10%);
position: absolute;
color:white;
bottom: 0;
padding:12px 30px 21px 30px;
transition: all ease-in-out 0.3s;
transition-property:bottom,opacity;
transition-duration:.3s;
p{
color:lighten($background,50%);
}
}
&_box.white{
background:#fff;
color:#2e2e2e;
box-shadow:-1px 0px rgba(0, 0, 0, 0.07);
}
&_box{
width:300px;
height:250px;
position:relative;
background:#3d3d3d;
margin-bottom:50px;
float:left;
box-shadow:-1px 0px rgba(255, 255, 255, 0.07);
cursor:pointer;
transform:scale(1);
transition-property:transform,background;
transition-duration:.3s;
&__inner{
padding:30px;
span{
font-size:36px;
font-weight:700;
}
.progress{
width:100%;
margin-top:10px;
height:6px;
background:rgba(0, 0, 0, 0.3);
margin-bottom:15px;
&_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;
&__bar--1{
width:10px;
height:20px;
background:$background;float:left;margin-right:10px;position: relative;
bottom: -10px;animation:graph 1s;
}
&__bar--2{
width:10px;animation:graph2 1s;
height:30px;float:left;
margin-right:10px;
background:$background;
}
&__bar--3{
width:10px;
height:24px;margin-right:10px;animation:graph3 1s;
background:$background;float:left;position: relative;
bottom: -6px;
}
&__bar--4{
width: 10px;
height: 14px;animation:graph4 1s;
bottom: -16px;
position: relative;
background: $background;
float: left;
}
}
&_bar{
height:6px;float:left;
width:58%;
background:$background;
animation:bar 2s;
}
&_bar--two{
height:6px;float:left;
width:78%;
background:$background;
animation:bar2 2s;
}
}
}
h2{
font-weight:normal;
font-size:16px;
margin:-4px 0px 3px 0px;
}
p{
font-size:11px;
color:rgb(182, 182, 182);clear: left;
font-weight:300;
width:160px;
margin:2px 0px 15px 0px;
}
&:hover{
background:#3d3d3d;
color:#fff;
transition-property:transform,background;
transition-duration:.3s;
position:relative;
z-index:1
}
}
}
}
.ui_box:hover > .ui_box__inner p{
color:lighten($background,30%);
}
.ui_box:hover > .drop{
transition-property:bottom,opacity;
transition-duration:.3s;
bottom:-42px;
z-index:-99999999;
opacity:1;
}
.ui_box:hover > .drop .arrow{
transition-property:transform;
transition-duration:1s;
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;
transition-property:transform;
transition-duration:1s;
transform:rotate(45deg);
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;
}
@keyframes bar{
from{width:0px}
to{width:58%;}
}
@keyframes bar2{
from{width:0px}
to{width:78%;}
}
@keyframes graph{
from{height:0px}
to{height:20px}
}
@keyframes graph2{
from{height:0px}
to{height:30px}
}
@keyframes graph3{
from{height:0px}
to{height:24px}
}
@keyframes graph4{
from{height:0px}
to{height:13px}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.