WIP- Placehold.it

Saved to show how to use placehold.it

by Matthew Day

HTML

<div class="container">
  <div class="inputcontainer">
    <input id="ana" type="checkbox" value="ana" />
    <label for="ana">Ana</label>
  </div>
  <div class="inputcontainer">
    <input id="beatrice" type="checkbox" value="beatrice" />
    <label for="beatrice">Beatrice</label>
  </div>
  <div class="inputcontainer">
    <input id="carlos" type="checkbox" value="carlos" />
    <label for="carlos">Carlos</label>
  </div>
  <div class="inputcontainer">
    <input id="david" type="checkbox" value="david" />
    <label for="david">David</label>
  </div>
  <div class="inputcontainer">
    <input id="eunice" type="checkbox" value="eunice" />
    <label for="eunice">Eunice</label>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
}

.inputcontainer {
  display: inline-block;
  float: left;
  position: relative;
  width: 20%;
}

label {
  display: block;
  height: 60px;
  left: 0;
  position: absolute;
  text-align: center;
  top: 80px;
  width: 100%;  /* must match width of image on :before */
}

label:before {
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  top: -70px;
  width: 100%;
}
label:after {
  /* color: gray; */
  content: '';
  font-size: 2rem;
  height: 100%;
  left: 0;
  position: absolute;
  top: -70px;
  width: 100%;
}

label[for="ana"]:before {
  background: url('https://placeholdit.imgix.net/~text?txtsize=20&bg=e6e6fa&txtclr=757575&txt=138%C3%97140&w=138&h=140');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

label[for="beatrice"]:before {
  background: url('https://placeholdit.imgix.net/~text?txtsize=20&bg=fffff0&txtclr=757575&txt=138%C3%97140&w=138&h=140');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

label[for="carlos"]:before {
  background: url('https://placeholdit.imgix.net/~text?txtsize=20&bg=d8bfd8&txtclr=757575&txt=138%C3%97140&w=138&h=140');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

label[for="david"]:before {
  background: url('https://placeholdit.imgix.net/~text?txtsize=20&bg=fff8dc&txtclr=757575&txt=138%C3%97140&w=138&h=140');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

label[for="eunice"]:before {
  background: url('https://placeholdit.imgix.net/~text?txtsize=20&bg=f5deb3&txtclr=757575&txt=138%C3%97140&w=138&h=140');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

input[type="checkbox"] {
  visibility: hidden;
}

input[type="checkbox"]:checked + label:after {
  background:...