JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<div class="card">
  <div class="card__img" style="background-image: url(https://i.etsystatic.com/13742379/r/il/ec57a9/5165688807/il_570xN.5165688807_bgv8.jpg)">
  </div>
  <div class="card__img2" style="background-image: url(https://i.etsystatic.com/13742379/r/il/ec57a9/5165688807/il_570xN.5165688807_bgv8.jpg);">
  </div>

  .card__cap
</div>

CSS

.card {
  width: 600px;
  height: 315px;
  border: 1px solid #000;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, #4568dc, #b06ab3);
}

.card__img {
  position: absolute;
  inset: -10%;
  background-size: cover; 
  background-position: center 15%;
  mix-blend-mode: soft-light;
  opacity: .3;
  filter: blur(10px);
} 

.card__img2 {
  position: absolute;
  inset: 20px;
  background-repeat: no-repeat;
  background-size: contain;
}