CODEWITHSUNDEEP
cssblurclip
Jeff Tian
Jeff Tian

Reputation: 5903

How to implement a blur effect outside clip area of image using CSS?

I want to blur the extra image outside a clip area, can I implement this effect by CSS?

Here is mockup of what I want: enter image description here

Upvotes: 0

Views: 1162

Answers (1)

Muhammet
Muhammet

Reputation: 3308

You should try it yourself before asking for help. Here you go:

.img-container{
    position:relative; 
    float: left;
}
.blurred-img{
    background: url("https://placeholdit.imgix.net/~text?txtsize=28&bg=0099ff&txtclr=ffffff&txt=300%C3%97300&w=300&h=300&fm=png") no-repeat;
    height: 200px;
    width: 200px;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}
img{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}
<div class="img-container">
   <div class="blurred-img">
   </div>
   <img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=ee09e0&txtclr=ffffff&txt=300%C3%97300&w=300&h=300&fm=png"/>
</div>

Upvotes: 1

Related Questions