<div class="wrapper">
  <div class="block">
    <div class="block__img-wrap">
      <img src="https://lh3.googleusercontent.com/proxy/kHUANOn8AJFsQSyq_WNhsKPTUsqK3AMJHGFXz1a8hJG0B8MT2upNY0-tV2fNC_ZbCABbGq1gc7m9bC-plCaamrWpktLFsVSLjQ" alt="" class="block__image">
    </div>
    <div class="block__text">
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur corporis debitis odit libero voluptatibus necessitatibus incidunt non quis, facere adipisci quibusdam omnis voluptas quia voluptatem aliquid maxime cupiditate? Illum, repudiandae</p>
    </div>
  </div>
</div>

* {
  box-sizing: border-box;
}

.wrapper {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 30px 15px;
}

.block {
  max-width: 300px;
  width: 100%;
  height: 500px;
  border: 1px solid #000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  &:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0;
    transition: opacity .3s;
    z-index: 1;
  }
  &__img-wrap {
    width: 100%;
    height: 50%;
    overflow: hidden;
  }
  &__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s;
  }
  &__text{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50%;
    padding: 15px;
    text-align: center;
  }
  &:hover {
    &:before {
      display: block;
      opacity: .5;
    }
    .block__image {
      transform: scale(1.2);
    }
  }
}