<a id="artist-eraserheads" class="item-link artist-item-link" href="http://en.wikipedia.org/wiki/Eraserheads" title="Go to Eraserheads page">
  <span class="label">Eraserheads</span>
</a>
/* Color background */
.item-link {
  position: relative;
  display: block;
  width: 20rem;
  height: 20rem;
  background-color: #000;
}

/* Background image */
.item-link:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20rem;
  height: 20rem;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: .35;
  z-index: 10;
}

/* Foreground image */
.item-link:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -45%;
  margin-left: -45%;
  width: 90%;
  height: 90%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
  z-index: 20;
}

#artist-eraserheads.item-link:before,
#artist-eraserheads.item-link:after {
  background-image: url(https://live.staticflickr.com/3868/14386991112_12327a4061_z.jpg);
}

.item-link .label {
  display: inline-block;  
  margin-top: .5rem;
  padding-top: 20rem;
  width: 100%;
  text-align: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.