<div class="wrapper">
  <div class="blur">
    <h4>Blur without overflow</h4>
    <div class="img-wrapper">
      <div class="img"></div>
    </div>
  </div>
  <div class="blur-overflow">
    <h4>Blur with overflow</h4>
    <div class="img-wrapper">
      <div class="img"></div>
    </div>
  </div>
</div>
.wrapper {
  & > div {
    width: min(100%, 300px);
  }
  .img-wrapper {
    border-radius: 8px;
    .img {
      filter: blur(5px);
      background-repeat: no-repeat;
      background-size: cover;
      background-image: url("https://image.shutterstock.com/z/stock-photo-various-typical-brazilian-small-savory-snacks-797089762.jpg");
      height: 200px;
    }
  }
  .blur-overflow {
    .img-wrapper {
      overflow: hidden;
    }
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.