a.ef_components-image_with_file_download {
  position: relative;
  /* Shrink this to the width of the image contained within. */
  display: table;
  text-transform: uppercase;
  margin-bottom: 20px;
}

a.ef_components-image_with_file_download:hover::before,
a.ef_components-image_with_file_download:focus::before {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  content: '';
  background-color: rgba(6, 126, 177, .4);
}

a.ef_components-image_with_file_download > img,
/* Override a rule from ef.css. */
.ef-main a.ef_components-image_with_file_download > img {
  display: block;
  margin: 0;
}

a.ef_components-image_with_file_download > .__overlay {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  background: #067eb1;
  border: 3px solid #067eb1 !important;
  color: white;
  font-family: 'Source Serif Pro', serif !important;
  font-size: .9rem;
  font-weight: 700;
  box-shadow: none;
}

a.ef_components-image_with_file_download > .__overlay::after {
  /* @todo We should have a reusable class for this. */
  font-family: 'ef-icon-font';
  content: "\e62a";
  float: right;
}

a.ef_components-image_with_file_download:hover > .__overlay {
  display: block;
}