<div class="block block--blur">
  <div class="block__man" id="superman">
    <figure>
      <img src="https://cdn.newsapi.com.au/image/v1/28811c194076a2f2730455884bdf29ae" alt="">
      <figcaption class="block__caption">
        <div class="block__name">Superman</div>
      </figcaption>
    </figure>
  </div>
</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

.block {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.block__man {
  position: relative;
  width: 400px;
  height: 600px;
  
  figure {
    width: 100%;
    height: 100%;
  }
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.block__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  color: #fff;
  text-align: center;
}

.block__name {
  position: relative;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 30px;
}

.block--blur {
  .block__caption {
    overflow: hidden;

    &::before, &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-position: center bottom;
      background-size: 100% auto;
      filter: blur(8px);
    }

    &::before {
      transform: scale(1.1);
    }
  }

  #superman {
    .block__caption::before,
    .block__caption::after {
      background-image: url('https://cdn.newsapi.com.au/image/v1/28811c194076a2f2730455884bdf29ae');
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.