.hover-card {
  display:inline-block;        /* shrink-wrap to image size */
  position:relative; 
}

.hover-card img {
  display:block;
  width:100%; 
  height:auto;
}

.hover-card .hover-text {
  position:absolute;
  inset:0;                     /* cover exactly the image area */
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.55);
  color:#fff;
  opacity:0;
  transition:opacity .25s ease;
  text-align:center;
  padding:1rem;
}

.hover-card:hover .hover-text,
.hover-card:focus-within .hover-text {
  opacity:1;
}