Image sides blurred by stretching

Question

I want to have blurry sides for my div

i have tried adding the image as background in a div and making it center the sides are white, i want them to have stretched blur effect

background: url(image.jpeg) no-repeat center center;

i want something like expected code: background: 25% blur right, 25% blur left, url(image.jpeg) no-repeat center center;

expected output:

enter image description here

Original image: enter image description here

Answer 1

Try this , if you have a high resolution image then replace the css(.bg-image) background image with that

.bg-image {
    background-image: url(https://i.sstatic.net/KGa2E.png);
    filter: blur(8px);
    -webkit-filter: blur(8px);
    height: 100%;
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.5);
}

/* Position text in the middle of the page/image */
.bg-text {

  color: white;
  font-weight: bold;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}

<div class="bg-image"></div>

<div class="bg-text">
<img src="https://i.sstatic.net/KGa2E.png">

  
</div>