<div>
  <img src="https://i.pinimg.com/736x/c3/ad/c6/c3adc6dd4babb6763721a74c42b6f47f.jpg" alt="">
  <img src="https://i.pinimg.com/736x/c3/ad/c6/c3adc6dd4babb6763721a74c42b6f47f.jpg" alt="">
</div>

body {
  background: #333;
}
div {
  display: grid;
  grid-template-areas: "img";
  width: 300px;
  height: 300px;
  background: white;
  overflow: hidden;
}

img {
  grid-area: img;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

img:first-child {
  object-fit: cover;
  filter: blur(5px);
  opacity: 0.8;
  width: 110%;
  height: 110%;
  transform: translate(-5%, -5%);
}
img:last-child {
  position: relative;
  object-fit: contain;
}