UI Statistic Pop Out CSS

index.haml

.title
  %h1
    Swagtastic UI Stat Pop out
  %h2
    Hover over each stat. Pure CSS...of course!
.ui
  .ui_box
    .ui_box__inner
      %h2
        Conversion Rate
      %p Lorem ipsum dolor sit amet
      .stat
        %span 58%
      .progress
        .progress_bar
      %p Lorem ipsum dolor sit amet. Some more super groovy information about this stat.
    .drop
      %p Take a closer look
      .arrow
  .ui_box
    .ui_box__inner
      %h2
        Sales By Type
      %p Lorem ipsum dolor sit amet
      .stat_left
        %ul
          %li
            Electical
          %li
            Clothing
          %li
            Entertainment
          %li
            Kitchen
      .progress_graph
        .progress_graph__bar--1
        .progress_graph__bar--2
        .progress_graph__bar--3
        .progress_graph__bar--4
      %p Lorem ipsum dolor sit amet. Some more super groovy information.
    .drop
      %p Take a closer look
      .arrow
  .ui_box
    .ui_box__inner
      %h2
        Total Sales
      %p Lorem ipsum dolor sit amet
      .stat
        %span $34,403.93
      .progress
        .progress_bar--two
      %p Lorem ipsum dolor sit amet. Some more super groovy information about this stat.
    .drop
      %p Take a closer look
      .arrow

script.js

/* Nope, not today */

style.scss

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600);

$background:#4FA584;

body{
  background:#ededeb;
  .title{
    width:600px;
    margin:0 auto;
    text-align:center;
    h1{
      margin:30px 0px 0px 0px;
      font-family: 'Source Sans Pro', sans-serif;
      font-weight:400;
      color: #3d3d3d;
    }
    h2{
      margin:10px 0px 0px 0px;
      font-size:18px;
      color: #8B8B8B;
      font-weight:400;
      font-family: 'Source Sans Pro', sans-serif;
    }
  }
  .ui{
    width:900px;
    margin:0 auto;
    margin-top:50px;
    font-family: 'Source Sans Pro', sans-serif;
    color:white;
    box-shadow:none;
    ul{
      margin:0px 30px 10px 0px;
      padding:0;
      list-style-type:none;
      font-size:11px;
      font-weight:400;
      line-height:20px;
    }
            .drop{
              z-index:-3;
              opacity:0;
              width: 240px;
              height: 10px;
              background: darken($background,10%);
              position: absolute;
              color:white;
              bottom: 0;
              padding:12px 30px 21px 30px;
                transition-property:bottom,opacity;
        transition-duration:.3s;
              p{
                color:lighten($background,50%);
              }
             }
    &_box{
      width:300px;
      height:220px;
      position:relative;
      background:#3d3d3d;
      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;-webkit-animation:graph 1s;
            }
                        &__bar--2{
              width:10px;-webkit-animation:graph2 1s;
              height:30px;float:left;
                          margin-right:10px;
              background:$background;
            }
                        &__bar--3{
              width:10px;
              height:24px;margin-right:10px;-webkit-animation:graph3 1s;
              background:$background;float:left;position: relative;
bottom: -6px;
            }
                        &__bar--4{
width: 10px;
height: 14px;-webkit-animation:graph4 1s;
bottom: -16px;
position: relative;
background: $background;
float: left;
            }
          }
          &_bar{
            height:6px;float:left;
            width:58%;
            background:$background;
            -webkit-animation:bar 2s;
          }
                    &_bar--two{
            height:6px;float:left;
            width:78%;
            background:$background;
            -webkit-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:$background;
        transform:scale(1.1);
        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;
  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);
-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;

    }

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

UI-Statistic-Pop-Out-CSS.markdown

UI Statistic Pop Out CSS

Another UI piece in CSS. Hover over the stat box for a nice scale etc. This does need tidying up slightly and i will make it responsive at some point so it looks top banana on mobile.

A Pen by Jamie Coulter on CodePen.

License.