How to crop the rounded image in css - html

Question

I need to make the profile image corner should be blur border. But in my code I can't get exactly.
I need result should be like this:
But my code, blur border is repeated its self. Because, the non blur image also have the same corner. Seems the corner is repeated.
effet {
width: 400px;
height: 125px;
margin: 0 auto 50px auto;
}
.profile-box {
width: 150px;
height: 150px;
margin-left: 40px;
border: none !important;
padding: 19.5px 10px;
display: block;
}
.min_cir {
border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 0;
}
.filtre--r {
-webkit-mask: -webkit-radial-gradient(center, closest-side, transparent 30%, black 80%);
-webkit-mask: radial-gradient(closest-side at center, transparent 50%, black 110%);
-webkit-filter: blur(2px);
mask: url('#mask-radial');
filter: blur(2px);
transform: scale(1.1);
position: absolute;
top: 0;
}
<div class="profile-box">
<div class="media">
<a class="pull-left" href="">
<div class="effet">
<img class="filtre filtre--r min_cir" src="http://i.imgur.com/oH1698V.jpg" />
<img class="min_cir" src="http://i.imgur.com/oH1698V.jpg">
</div>
</a>
</div>
</div>
I need to cut out the non-blur image as per the width of the blur corner.

Answer 1

The scale() method increases or decreases the size of an element (according to the parameters given for the width and height). I think you can achieve needed result by using different vertical and horizontal paramateres for scale() method. Currently you apply 1.1 magnitude for width and height. This is right for forms that have a shape of a square (equal width and height) whereas your image is rectangular( width and height are not equal). Therefore you can write scale() method for example like this : transform: scale(1.09, 1.13);

Answer 2

You can give following way:
Remove scaling first, because it will display like repeating the image.
Then put second image inside another div and give following css as per given in example. Here in example div is imgDiv
And parent div of second image i.e. imgDiv is overflow:hidden and give left and top value and give height and width is (image div - 50px(if want 15px blur)) do the trick.
And give same height and width of both image. Here i give same size as original image.
effet {
width: 400px;
height: 125px;
margin: 0 auto 50px auto;
}
.profile-box {
width: 150px;
height: 150px;
margin-left: 40px;
border: none !important;
padding: 19.5px 10px;
display: block;
}
.min_cir {
border-radius: 50%;
border-radius: 50%;
position: absolute;
top: -20px;
left: -20px;
}
.filtre--r {
-webkit-mask: -webkit-radial-gradient(center, closest-side, transparent 30%, black 80%);
-webkit-mask: radial-gradient(closest-side at center, transparent 50%, black 110%);
-webkit-filter: blur(4px);
mask: url('#mask-radial');
filter: blur(4px);
position: absolute;
top: 0;
left:0;
}
.imgDiv{
border-radius: 50%;
height: 266px;
left: 20px;
overflow: hidden;
position: absolute;
top: 20px;
width: 660px;
}
img{
width: 700px;
height: 306px;
}
<div class="profile-box">
<div class="media">
<a class="pull-left" href="">
<div class="effet">
<img class="filtre filtre--r min_cir" src="http://i.imgur.com/oH1698V.jpg" />
<div class="imgDiv">
<img class="min_cir" src="http://i.imgur.com/oH1698V.jpg">
</div>
</div>
</a>
</div>
</div>