Many websites are using blurred images in background. If you want to highlight part of the image, what will you do ? Maybe drawing some shape on the image with red marker. We can do this with SVG filter and mask components. UnBlurring the part of completely blurred image will give better and clean attention.
Please have look at below code.
<svg class="blur" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" width="750" height="498">
      <!-- Image that was blurred and half brightend -->      
      <image filter="url(#filter2)" xlink:href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ7OAlly4Mc9eoXELtdZHe5uKwwb0bPm25DZpoYEPTR8dIBpSpV6_c2cy5qGJ6trxbs2UR28VNLI9LSPEt4RhG9q9LMHpJNeZ2_Ruiu_bUmg_GK66bNaoGD2VXLAIBqtY_-IUY5S73DEQ/s912/inNature.JPG" width="100%" height="100%"></image>
      <!-- filter to control blur and brightness -->      
      <filter id="filter2">        
        <!-- standard deviation to control blur -->
        <feGaussianBlur stdDeviation="7"></feGaussianBlur>
        <!-- standard deviation to control brightness -->         
        <feComponentTransfer>          
          <feFuncR  type="linear" slope="0.5"></feFuncR>
          <feFuncG type="linear" slope="0.5"></feFuncG>          
          <feFuncB type="linear" slope="0.5"></feFuncB>          
        </feComponentTransfer>      
      </filter>      
      <!-- mask to unblur the part of the image -->
      <mask id="mask1">       
        <circle cx="177" cy="166" r="150" fill="white" style="opacity: 1;"></circle>
      </mask>       
      <!-- image to show unblurred image part -->
      <image xlink:href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ7OAlly4Mc9eoXELtdZHe5uKwwb0bPm25DZpoYEPTR8dIBpSpV6_c2cy5qGJ6trxbs2UR28VNLI9LSPEt4RhG9q9LMHpJNeZ2_Ruiu_bUmg_GK66bNaoGD2VXLAIBqtY_-IUY5S73DEQ/s912/inNature.JPG"
        width="100%" height="100%" mask="url(#mask1)"></image>    
</svg>
filter2 controls blur and brightness of the image. mask1 shows only specified part of the image. stdDevation attribute value represents the level of blur, If you want increase the blur effect, just increase stdDevation value. slope attribute value of feFunc effects the brightness of the image, this value should be in between 0 and 1. Decrease slope value to get darken blurred image in the background.  

10 comments:

  1. i think its easier to use filters, if you are a newbie, personally i use https://macphun.com/focus for my shots!its great after macro shooting!

    ReplyDelete
  2. Thank you for sharing this. I think it is very important for kids to know how to make photos better. Try to use filters https://photolemur.com to make your photos better.

    ReplyDelete
  3. The website is looking bit flashy and it catches the visitors eyes. Design is pretty simple and a good user friendly interface. image masking service

    ReplyDelete
  4. Take greetings from fotomasking.com. Good to see your post. Mainly the key fact of this service is cost effective. Saving a lot of money for the companies actually who needs a bulk image editing every months. Thanks to share this.Clipping path service

    ReplyDelete
  5. Very useful post. This is my first time i visit here. I found so many interesting stuff in your blog. Cuponism My

    ReplyDelete
  6. Thank you for sharing informative post. I think it is very important for beginners to know how to make photos better.

    Best Regards:

    clipping path services

    ReplyDelete
  7. One morning, as Gregor Samsa was waking up from anxious dreams, he discovered that in bed he had been changed into a monstrous verminous bug. He lay on his armour-hard back and saw, as he lifted his head up a little, his brown, arched abdomen divided up into rigid bow-like sections. From this height the blanket, just about ready to slide off completely, could hardly stay in place. His numerous legs, pitifully thin in comparison to the rest of his circumference, flickered helplessly before his eyes.



    "Franz Kafka, "The Metamorphosis", 1.1


    Discount Link: http://bit.ly/wr-discount

    ReplyDelete

  8. All men by nature are actuated with the desire of knowledge, and an indication of this is the love of the senses; for even, irrespective of their utility, are they loved for their own sakes; and pre-eminently above the rest, the sense of sight. For not only for practical purposes, but also when not intent on doing anything, we choose the power of vision in preference, so to say, to all the rest of the senses. And a cause of this is the following, — that this one of the senses particularly enables us to apprehend? whatever knowledge it is the inlet of, and that it makes many distinctive? qualities manifest.

    https://www.clippingworld.com/photo-cut-out-service/

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. Really appreciate this post!!. When you need Clipping path service Retouching Zone will help to make high quality images for your eCommerce online store. Free trial available for quality checking.

    ReplyDelete

Blogroll

Popular Posts