<style>
/* Hover Container and main background - the stuff that surrounds your hover */
.container {
  width: 300px;
  height: 400px;
  margin: 10px auto;
  padding: 15px;
  background: #232323;
  background: url('https://placehold.it/300x4600.png') center no-repeat;
  background-size: cover;
  border: 2px solid #252D34;
  z-index: 1;
}

/* Your styles for the inner div that shows when hovered go here. Opacity and z-index keep everything hidden properly */
.hover {
  background: #111;
  color: #a0a0a0;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 10px;
  opacity: 0;
  z-index: 0;
  transition: all ease-in-out .2s;
}
/* The hover state of the container. Notice that there's an added focus-within, this is what allows keyboards to access the hover, and like tabindex="0" must remain in the css for this to work */
.container:hover .hover, .container:focus-within .hover {
  opacity: 1;
  z-index: 1;
}

/* Eliminates the hover on small screens, resets width and height */
@media (max-width: 1000px) {
  .container, .hover {width: 100%; height: unset; z-index: 1; opacity: 1; visibility: visible;}
}
</style>

<div class="container">
  <div class="hover" tabindex="0"><h1>Hover Heading</h1>
    <p>Hover paragraph</p>
  </div>
</div>