/* THE OUTER SHELL */
.box {
  position: relative; /* This is the anchor */
  width: 300px;
  height: 200px;
  overflow: hidden; /* This crops the text so it stays inside */
  display: inline-block;
  border: 2px solid #ffc0cb; /* A cute pink border to show it's working */
}

/* THE PHOTO */
.box img {
  width: 100%;
  height: 100%;
  display: block;
}

/* THE HIDDEN TEXT LAYER */
.box .info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* Black tint */
  color: white;
  
  /* THE MAGIC: Center the text */
  display: flex;
  align-items: center;
  justify-content: center;

  /* HIDE IT */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* THE REVEAL */
.box:hover .info {
  opacity: 1;
}