.media-link {
  display: inline-block;
  position: relative;
}

.media-link:after {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  min-height: 96px;
  min-width: 96px;
  margin: -48px;
  background-color: rgba(0, 0, 0, 0.6);
  background-position: center;
  background-repeat: no-repeat;
}

.media-link.audio:after,
.media-link.video:after {
  // Shows a slightly transparent "play" icon
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path style="opacity:0.6;fill:white;" d="M 30.6,14 7.6,0.4 c -1.8,-1 -3.6,-0.2 -3.6,2 v 27.2 c 0,2.2 1.8,3 3.6,2 L 30.6,18 c 1.8,-1.2 1.8,-2.8 0,-4 z" /></svg>');
}

.media-link.audio:hover,
.media-link.video:hover {
  cursor: pointer;
  &:after {
    // Shows an opaque "play" icon
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path style="fill:white;" d="M 30.6,14 7.6,0.4 c -1.8,-1 -3.6,-0.2 -3.6,2 v 27.2 c 0,2.2 1.8,3 3.6,2 L 30.6,18 c 1.8,-1.2 1.8,-2.8 0,-4 z" /></svg>');
  }
}