JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="hover-container">
  <div class="hover-container__img"></div>
  <div class="hover-container__description">
    <span class="hover-container__text">Some text</span>  
  </div>
</div>

</body>
</html>

SASS

*
  box-sizing: border-box

body
  background-color: orange

.hover-container
  $root: &
  
  width: 100vw
  height: 100vh
  position: relative
  &__img
    width: 100%
    height: 100%
    background-image: url('https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg')
    background-size: cover
    background-position: center center
  &__description
    top: 0
    left: 0
    z-index: 2
    position: absolute
    width: 100%
    height: 100%
    display: flex
    align-items: center
    justify-content: center
    padding: 2rem
    background-color: rgba(255, 255, 255, 0)
    color: black
    opacity: 0
    transition: all .3s ease-in-out
  &__text
  &:hover
    & #{$root}      
      &__description
        opacity: 1
        background-color: rgba(255, 255, 255, .6)