flatcolor.css

@import url(http://fonts.googleapis.com/css?family=Carrois+Gothic+SC);
* { box-sizing: border-box }
html, body {
  width: 100%;
  height: 100%;
}
div {
  float: left;
  display: block;
  color: #fff;
  width: 20%;
  height: 25%;
  position: relative;
  transition: opacity 0.5s ease;
}
div:hover {
  opacity: 0.85;
}
p {
  font-family: 'Carrois Gothic SC';
  font-size: 1em;
  position: absolute;
  bottom: 0;
  padding-left: 0.5em;
  margin-bottom: 0.3em;
  text-transform: uppercase;
}
.turquoise { background: #1abc9c; }
.emerland { background: #2ecc71; }
.peterriver { background: #3498db; }
.amethyst { background: #9b59b6; }
.wetasphalt { background: #34495e; }
.greensea { background: #16a085; }
.nephritis { background: #27ae60; }
.belizehole { background: #2980b9; }
.wisteria { background: #8e44ad; }
.midnightblue { background: #2c3e50; }
.sunflower { background: #f1c40f; }
.carrot { background: #e67e22; }
.alizarin { background: #e74c3c; }
.clouds { background: #ecf0f1; color: #999; }
.concrete { background: #95a5a6; }
.orange { background: #f39c12; }
.pumpkin { background: #d35400; }
.pomegranate { background: #c0392b; }
.silver { background: #bdc3c7; }
.asbestos { background: #7f8c8d; }