How to keep blur contained within a div?

Question

I have this music player, where the album art is shown on the front and blurred as a background behind all the other elements. See image

I don't want that blur to extend beyond the container as shown in the image.

My css at the moment for the background album is looking like this:

 box-shadow: 0 10px 150px rgba(0, 0, 0, .3) inset;
-webkit-filter: blur(30px);
-moz-filter: blur(30px); 
-o-filter: blur(30px); 
-ms-filter: blur(30px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='30');
filter: blur(30px);
object-fit:cover;

If any more info is needed let me know.

Possible duplicate of [How to apply a CSS 3 blur filter to a background image](http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image) — Abhishek Pandey, Apr 06 '17 at 06:00

score 3 · Accepted Answer · answered Apr 06 '17 at 06:05

For me. Use img and use position absolute. Fill the parent with width: 100%.

Note: parent element should have position: relative and overflow: hidden

body {
  padding: 20px; }

.player {
  box-sizing: border-box;
  position: relative;
  height: 300px;
  width: 600px;
  overflow: hidden;
  border-radius: 5px; }
  
.player img {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  filter: blur(10px); }
  
.player .container {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7); }

<div class="player">
  <img src="http://2.bp.blogspot.com/-S0n9Rq5kIZg/VpKvLN1EyoI/AAAAAAAAAT8/B6kEp6sRTH4/s1600/dewapoker.jpg" />
  <div class="container">
</div>

Inserting "overflow: hidden" for the container rather than the background class seemed to work. Cheers! — Johnson14, Apr 06 '17 at 06:20

How to keep blur contained within a div?

1 Answers1