.image-hover {
  position: relative;
}

.image-hover .image {
  background-position: center;
  background-size: cover;
  display: block;
  position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.image-hover .image:hover,
.image-hover .image:focus {
  background-position: center;
}

.image-hover .content {
  background-color: rgba(255,255,255,.85);
  display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  height: 100%;
  opacity: 0;
  padding: 15px;
  text-align: center;
  transition: all 250ms ease-in-out;
}

.image-hover:not(.touch-device):hover .content,
.image-hover.touch-device.show-details .content {
  opacity: 1;
}

.image-hover .heading {
  margin-bottom: 10px;
}

.image-hover .sub-text {
  font-size: 1.6rem;
  line-height: 1.2;
  margin-bottom: 5px;
}

.image-hover .open-button {
  border: 2px solid #fff;
  border-radius: 0;
  font-size: 3rem;
  line-height: 1;
  padding: 0 10px 2px;
  position: absolute;
    right: 5px;
    bottom: 5px;
  z-index: 10;
}

.image-hover.show-details .open-button {
  background-color: transparent;
  border-color: transparent;
  color: #333;
  transform: rotate(45deg);
}