JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hover-container">
  <img src="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" alt="image" class="hover-container__img">
  <span class="hover-container__text">Some text</span>
</div>

<div class="hover-container">
  <img src="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" alt="image" class="hover-container__img">
  <span class="hover-container__text">Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</span>
</div>

SASS

*
  box-sizing: boreder-box

.hover-container
  $root: &

  position: relative
  width: 100%
  height: 100%
  display: flex
  align-items: center
  justify-content: center
  color: black
  &__img
    width: 100%
    height: auto
    transition: opacity .3s ease-in-out
    opacity: 1
  &__text
    position: absolute
    top: 1
    left: 1
    z-index: 2
    padding: 2rem
    opacity: 0
    transition: opacity .3s ease-in-out
  &:hover
    & #{$root}
      &__img
        opacity: .5
      &__text
        opacity: 1