Login/Register
Blur part of an image with CSS
Asked Answered
Solved csscss-filters
P

4

8

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?

Parulis answered 8/10, 2014 at 19:38 Comment(2)
You might find the answer here or here. – Grampus
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. – Petroglyph
T
7

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>
Toxophilite answered 8/10, 2014 at 19:53 Comment(1)
The example is not working correctly. Wanted to fix it but change got rejected. Thus added a new answer: https://mcmap.net/q/1331693/-blur-part-of-an-image-with-css – Heptane
S
1

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

Suggest answered 27/9, 2016 at 11:11 Comment(0)
O
1

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>
Ordinary answered 2/1, 2020 at 23:28 Comment(0)
N
0
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

Navicular answered 12/1, 2016 at 13:8 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.