tkheyfets/chart.html

## chart.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width" />
  <link rel="stylesheet" type="text/css" href="main.css" />
  <title>CSS Chart</title>
</head>
<body>
  <div class="bars-wrapper">
    <div style="width: 25%;" class="bar primary"></div>
    <div style="width: 50%;" class="bar dark"></div>
    <div class="labels-wrapper">
      <ul class="labels">
        <li class="overall"><strong class="accent-color">30</strong> out of <small>40</small> games played</li>
        <li data-label="primary"><strong class="primary-color">10</strong> out of <small>40</small> games lost</li>
        <li data-label="dark"><strong class="dark-color">20</strong> out of <small>40</small> games won</li>
      </ul>
    </div>
  </div>
</body>
</html>

## main.css
html {
  font-family: 'Helvetica Neue', Helvetica, Georgia, sans-serif;
}
html * { box-sizing: border-box; }

.clearfix {
  height: 1%;
  display: table;
}

.clearfix:after,
.clearfix:before { clear: both; }

.bars-wrapper {
  background-color: transparent;
  width: 240px;
  height: 40px;
  margin-top: 40px;
  position: relative;
}

.bars-wrapper:before {
  content: '';
  display: block;
  width: 100%;
  background-color: #DCEDC8;
  height: 20px;
  position: absolute;
  top: 20px;
}

.bar {
  position: relative;
  height: 20px;
  margin-top: 20px;
  -moz-transition: all ease-in .25s;
  -webkit-transition: all ease-in .25s;
  transition: all ease-in .25s;
  float: left;
  cursor: pointer;
}

.bar:hover {
  height: 40px;
  margin-top: 0;
}

.bar.primary { background-color: #8BC34A; }
.bar.dark    { background-color: #689F38; }

.primary-color { color: #8BC34A; }
.dark-color    { color: #689F38; }
.accent-color  { color: #8BC34A; }

strong {
  font-size: 18px;
}

small {
  font-size: 15px;
  color: #727272;
}

.labels-wrapper {
  overflow: hidden;
  position: absolute;
  height: 32px;
  width: 100%;
  padding: 0;
  margin: 0;
  top: -40px;
}

.labels {
  list-style: none;
  position: absolute;
  top: 0;
  padding: 0;
  margin: 0;
  width: 100%;
   -moz-transition: top ease-in .25s;
  -webkit-transition: top ease-in .25s;
  transition: top ease-in .25s;
  color: #B6B6B6;
  font-size: 12px;
}

.labels li {
  height: 32px;
  position: relative;
  opacity: 0;
  -moz-transition: all ease-in .25s .125s;
  -webkit-transition: all ease-in .25s .125s;
  transition: all ease-in .25s .125s;
}

.labels li.overall { opacity: 1; }

.bar.dark:hover ~ .labels-wrapper [data-label="dark"],
.bar.primary:hover ~ .labels-wrapper [data-label="primary"] {
  opacity: 1;
}

.bar.primary:hover ~ .labels-wrapper .labels {
  top: -32px;
}

.bar.dark:hover ~ .labels-wrapper .labels {
  top: -64px;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width" />
	<link rel="stylesheet" type="text/css" href="main.css" />
	<title>CSS Chart</title>
	</head>
	<body>
	<div class="bars-wrapper">
	<div style="width: 25%;" class="bar primary"></div>
	<div style="width: 50%;" class="bar dark"></div>
	<div class="labels-wrapper">
	<ul class="labels">
	<li class="overall"><strong class="accent-color">30</strong> out of <small>40</small> games played</li>
	<li data-label="primary"><strong class="primary-color">10</strong> out of <small>40</small> games lost</li>
	<li data-label="dark"><strong class="dark-color">20</strong> out of <small>40</small> games won</li>
	</ul>
	</div>
	</div>
	</body>
	</html>
	html {
	font-family: 'Helvetica Neue', Helvetica, Georgia, sans-serif;
	}
	html * { box-sizing: border-box; }

	.clearfix {
	height: 1%;
	display: table;
	}

	.clearfix:after,
	.clearfix:before { clear: both; }

	.bars-wrapper {
	background-color: transparent;
	width: 240px;
	height: 40px;
	margin-top: 40px;
	position: relative;
	}

	.bars-wrapper:before {
	content: '';
	display: block;
	width: 100%;
	background-color: #DCEDC8;
	height: 20px;
	position: absolute;
	top: 20px;
	}

	.bar {
	position: relative;
	height: 20px;
	margin-top: 20px;
	-moz-transition: all ease-in .25s;
	-webkit-transition: all ease-in .25s;
	transition: all ease-in .25s;
	float: left;
	cursor: pointer;
	}

	.bar:hover {
	height: 40px;
	margin-top: 0;
	}

	.bar.primary { background-color: #8BC34A; }
	.bar.dark { background-color: #689F38; }

	.primary-color { color: #8BC34A; }
	.dark-color { color: #689F38; }
	.accent-color { color: #8BC34A; }

	strong {
	font-size: 18px;
	}

	small {
	font-size: 15px;
	color: #727272;
	}

	.labels-wrapper {
	overflow: hidden;
	position: absolute;
	height: 32px;
	width: 100%;
	padding: 0;
	margin: 0;
	top: -40px;
	}

	.labels {
	list-style: none;
	position: absolute;
	top: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	-moz-transition: top ease-in .25s;
	-webkit-transition: top ease-in .25s;
	transition: top ease-in .25s;
	color: #B6B6B6;
	font-size: 12px;
	}

	.labels li {
	height: 32px;
	position: relative;
	opacity: 0;
	-moz-transition: all ease-in .25s .125s;
	-webkit-transition: all ease-in .25s .125s;
	transition: all ease-in .25s .125s;
	}

	.labels li.overall { opacity: 1; }

	.bar.dark:hover ~ .labels-wrapper [data-label="dark"],
	.bar.primary:hover ~ .labels-wrapper [data-label="primary"] {
	opacity: 1;
	}

	.bar.primary:hover ~ .labels-wrapper .labels {
	top: -32px;
	}

	.bar.dark:hover ~ .labels-wrapper .labels {
	top: -64px;
	}