CODEWITHSUNDEEP
htmlcssimagebackground-imageblur
wruckie
wruckie

Reputation: 1803

Is it possible to only blur background image solely in CSS like is done in video production?

In my site, I have a photo div with random user submitted pictures. I have the same 'fill the frame' issues as landscape video like broadcast television when mixed with portrait cell phone video - they use a blurred enlarged version to fill the unused space. Is there a way to produce this effect solely in CSS? In all of my attempts, the blur affects the entire stack, blurring all overlaying images and text.

<div class="h-full">
   <div style=" background: url('url');background-size:cover;filter:blur(8px);">
      <img class="h-[390px] w-full object-contain object-center" src="url">
   </div>
</div>

Desired Outcome

Desired Outcome

My Outcome My image is portrait and is showing twice, but totally ruined by the blur bleeding through

enter image description here

Extra Credit: Does this effect have a official name?

Upvotes: 0

Views: 1965

Answers (1)

Hao Wu
Hao Wu

Reputation: 20669

You may use backdrop-filter to prevent edge bleeding for blurred background (click Run code snippet again to see a different picture):

body {
  margin: 0;
  overflow: hidden;
}

.image-frame {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.image-frame .blur {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
}

.image-frame img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  
  /* blurring */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
<div class="image-frame">
  <div class="blur" style="background-image: url(https://picsum.photos/512/512)"></div>
  <img src="https://picsum.photos/512/512" />
</div>

Upvotes: 3

Related Questions