Blur part of an image with CSS

I have a problem with an image. I tried to blur a part of an image, but my solution deosn't work. Please, take a look at this code:

HTML file

<div id="image">
    <div class="blur"></div>
</div>

CSS file

#image {
    width: 940px;
    height: 360px;
    background-image: url('../img/photo.png');
}

#image .blur {
    background-image: url('../img/photo.png');
    background-position: center right;
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
    filter: blur(3px);
    float: right;
    height: 100%;
    width: 360px;
}

It's possible in CSS?

I have set the overflow property of the outer div to hidden and the margin-right of the inner one to -1 and it worked like a charm.

#image {
    ...
    overflow: hidden;
}

#image .blur {
    ...
    margin-right: -1px;
}

Here is the working example in JSFiddle.

#image {
    width: 940px;
    height: 360px;
    overflow: hidden;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Nuvola_wikipedia_icon.png/240px-Nuvola_wikipedia_icon.png');
}

#image .blur {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Nuvola_wikipedia_icon.png/240px-Nuvola_wikipedia_icon.png');
    background-position: center right;
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
    filter: blur(3px);
    float: right;
    height: 100%;
    width: 360px;
    margin-right: -1px;
}
<div id="image">
    <div class="blur"></div>
</div>

How to create clipped, blurred background images in CSS , It comes with a --blurred-img variation, where the area behind the team name is blurred. I thought it would be interesting to share the process of� Learn how to create a blurry background image with CSS. Blur Background Image. Note: This example does not work in Edge 12, IE 11 or earlier versions.

HTML

    <body>
      <div id="photoContainer"><img id="image" src="http://www.cpplcounseling.com/uploads/4/6/8/2/46828361/2181364_orig.jpg" / title="Double click to mask" width="100%"></div>

      <br>
      <button id="mask">Mask</button>
      <button id="undoMask">Undo Mask</button>
      <button id="unMask">UnMask</button>
      <button id="save">Save</button>
      <button id="getSaved">Get Saved</button>
      <br>
      <br>
      <i>Note : Double click on particular portion of the image to mask that spot</i>
    </body>

JS


    $(document).ready(function() {
      var maskStyles = [];
      $("#image").click(function() {
        $(".imageMask").draggable({
          disabled: true
        }).resizable({
          disabled: true
        });
        $(".imageMask").addClass("blur");
      });
      $("#image").dblclick(function(e) {
        var x = e.offsetX;
        var y = e.offsetY;
        $(".imageMask").draggable({
          disabled: true
        }).resizable({
          disabled: true
        });
        $(".imageMask").addClass("blur");
        $("#photoContainer").append('<div  class="imageMask ui-draggable ui-draggable-handle ui-resizable" style="left: ' + (x - 3) + 'px; top: ' + (y - 3) + 'px;"></div>');
        $("#photoContainer .imageMask:last-child").draggable({
          containment: 'parent'
        }).resizable({
          handles: 'all'
        });
      });
      $("#mask").click(function() {
        $(".imageMask").draggable({
          disabled: true
        }).resizable({
          disabled: true
        });
        $(".imageMask").addClass("blur");
        $("#photoContainer").append('<div  class="imageMask ui-draggable ui-draggable-handle ui-resizable" style="left: 65px; top: 55px;"></div>');
        $("#photoContainer .imageMask:last-child").draggable({
          containment: 'parent'
        }).resizable({
          handles: 'all'
        });
      });
      $("#undoMask").click(function() {
        if ($("#photoContainer .imageMask:last-child").hasClass("blur")) {
          $("#photoContainer .imageMask:last-child").removeClass("blur");
          $("#photoContainer .imageMask:last-child").draggable({
            disabled: false
          }).resizable({
            disabled: false,
            handles: 'all'
          });
        } else {
          $("#photoContainer .imageMask:last-child").remove();

        }
      });
      $("#unMask").click(function() {

        $("#photoContainer .imageMask").remove();
      });
      $("#save").click(function() {
        maskStyles = [];
        $("#photoContainer .imageMask").each(function(i, obj) {
          maskStyles.push(obj.getAttribute("style"));
        });
        console.log(maskStyles);
      });

      $("#getSaved").click(function() {
        for (maskStyle in maskStyles) {
          $("#photoContainer").append('<div  class="imageMask ui-draggable ui-draggable-handle ui-resizable blur" style="' + maskStyles[maskStyle] + '"></div>');
        }
        $("#photoContainer .imageMask").draggable({
          containment: 'parent',
          disabled: true
        }).resizable({
          disabled: true,
           handles: 'all'
        });
        $("#image").trigger('click');
      });
    });

CSS



    .imageMask {
       background-color: #131212;
       opacity: .75;
       position: absolute;
       left: 85px;
       top: 66px;
       width: 30px;
       height: 30px;
     }

     .imageMask:hover {
       cursor: move;
     }

     #photoContainer {}

     .blur {
       -webkit-filter: blur(3px);
       filter: blur(3px);
       opacity: 1;
       cursor: default!important;
     }

.ui-resizable {
       position: relative;
     }

     .ui-resizable-handle {
       position: absolute;
       font-size: 0.1px;
       z-index: 99999;
       display: block;
     }

     .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle {
       display: none;
     }

     .ui-resizable-n {
       cursor: n-resize;
       height: 7px;
       width: 100%;
       top: -5px;
       left: 0;
     }

     .ui-resizable-s {
       cursor: s-resize;
       height: 7px;
       width: 100%;
       bottom: -5px;
       left: 0;
     }

     .ui-resizable-e {
       cursor: e-resize;
       width: 7px;
       right: -5px;
       top: 0;
       height: 100%;
     }

     .ui-resizable-w {
       cursor: w-resize;
       width: 7px;
       left: -5px;
       top: 0;
       height: 100%;
     }

     .ui-resizable-se {
       cursor: se-resize;
       width: 12px;
       height: 12px;
       right: 1px;
       bottom: 1px;
     }

     .ui-resizable-sw {
       cursor: sw-resize;
       width: 9px;
       height: 9px;
       left: -5px;
       bottom: -5px;
     }

     .ui-resizable-nw {
       cursor: nw-resize;
       width: 9px;
       height: 9px;
       left: -5px;
       top: -5px;
     }

     .ui-resizable-ne {
       cursor: ne-resize;
       width: 9px;
       height: 9px;
       right: -5px;
       top: -5px;
     }

Fiddle Demo

Create Stunning Image Effects with CSS Backdrop-filter, If you need a refresher on this topic, CSS Filter Effects: Blur, Grayscale, Brightness and More in CSS! is a great read. While the filter property helps us apply effects like blur and sepia on a given element, the backdrop-filter property will help us apply the same effects to the area behind the element. The blur() CSS function applies a Gaussian blur to the input image. Its result is a <filter-function> . The source for this interactive example is stored in a GitHub repository.

You choose a suitable background-position for the outer div.

Make inner div position:absolute. This is where the blur appears. Apply blur to the :before selector.

JSFiddle Demo

Frosting Glass with CSS Filters, As browsers begin to incorporate filters as part of the web platform, Since the blurred image is a child of the overlay, we also need to shift it� Image Filters. The CSS filter property adds visual effects (like blur and saturation) to an element. Note:

Position the blurred overlay with margin-top and margin-left, define size of overlay with height and width and the location of the overlay with background-position:

background-position: -60px 880px;
filter: blur(3px);
height: 300px;
width: 300px;
margin-left: 60px;
margin-top: 144px;

#image {
    width: 400px;
    height: 500px;
    overflow: hidden;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Generic_Camera_Icon.svg/1213px-Generic_Camera_Icon.svg.png');
}

#image .blur {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Generic_Camera_Icon.svg/1213px-Generic_Camera_Icon.svg.png);
    background-position: -60px 880px;
    filter: blur(3px);
    height: 300px;
    width: 300px;
    margin-left: 60px;
    margin-top: 144px;
}
<div id="image">
    <div class="blur"></div>
</div>

How To Create a Blurred Background Image, Learn how to create a blurry background image with CSS. Blur Background Image. Note: This example does not work in Edge 12, IE 11 or earlier versions. Try it� 100% will make the image completely gray (used for black and white images). Note: Negative values are not allowed. Play it » hue-rotate(deg) Applies a hue rotation on the image. The value defines the number of degrees around the color circle the image samples will be adjusted. 0deg is default, and represents the original image.

How To Add Filter Effects to Images, The CSS filter property adds visual effects (like blur and saturation) to an element . Change the color of all images to black and white (100% gray):. img { The backdrop-filter property in CSS is used to apply filter effects (grayscale, contrast, blur, etc) to the background/backdrop of an element.The backdrop-filter has the same effect as the filter property, except the filter effects are applied only to the background and instead of to the element’s content.

CSS - Blurred Background, There's a mistake in the video about 'translate' in '.blurred-bg-container .blur'. The Duration: 7:49 Posted: 14 Jan 2018 If you want the blur to have a color, you’ll need to add the background property with an rgba value. Make sure that the alpha (opacity) is less than 1, so we can see through the color. Then we’ll add the magical backdrop-filter CSS property and give it a value of blur(8px). Hint, hint…increase/decrease the px to increase/decrease the blur.

How to make a background blur in CSS with one line of code, How to make a background blur in CSS with one line of code Lovely background image of some pineapples credit: pineapplesupply.co graphical effects such as blurring or color shifting to the area behind an element. PowerPoint doesn't have a literal "blur" command, but it's easy to use a shape plus an effect to achieve the result you want. Blur part of a picture. Insert a picture on a slide in PowerPoint. Blur part of the picture, then save it as a separate image. In PowerPoint, use File > Insert to put the picture on a slide.

Comments
  • You might find the answer here or here.
  • I'd say, that @Karlen's answer is better. I can reproduce Hashem's problem but have no easy fix. You should accept his answer, then I delete mine.
  • The example is not working correctly. Wanted to fix it but change got rejected. Thus added a new answer: stackoverflow.com/a/59571317/5263954