How to make image blurred but make edges crisp - html

Question

Please, don't say anything like OH THERE ARE A LOT OF ANSWERS OUT THERE. I founded a lot of them, but none of them worked. This is HTML:
<img src="images/ONamaImg.png" class="main-page-img"> (not all of the HMTL of course, only pic code)
And here is CSS:
.main-page-img
{
filter: grayscale(100%) blur(10px);
float: right;
width: 550px;
height: 700px;
z-index: -1;
border-radius: 1000px 0px 0px 1000px;
margin-top: -350px;
box-shadow: 0px 0px 30px #777777;
overflow:hidden;
}
Thanks!

Answer 1

First, wrap the image in a container :
<div class="container">
<img src="path/to/image.jpg">
</div>
Then, add these css rules to the container and image:
.container {
overflow: hidden;
height: /*add height*/;
width: /*add width*/;
}
img {
margin: -10px;
}
Note: I didn't add other styles. Make sure to add them.
The basic concept is to wrap the blurred image in the container and clip the blurred edges using negative margins.

Answer 2

I also found a lot of answers that don't seen to solve the problem.
Here is my attempt:
HTML
First I created a container and added an image to use as the crisp border.
<div class="container">
<img class="border-img" src="https://pbs.twimg.com/profile_images/2209676047/gatinho-5755_400x400.jpg" />
<div class="blur-img"></div>
</div>
CSS
Then I use the same image as a background to an epty div inside the container. Within the div backgroud I can scale and adjust the images to make then appear like one.
.container {
width: 450px;
height: 500px;
overflow:hidden;
}
.blur-img {
width: 70%;
height: 70%;
background-image: url("https://pbs.twimg.com/profile_images/2209676047/gatinho-5755_400x400.jpg");
background-position: center;
transform: scale(1.2); /* use scale to zoom image */
filter: blur(10px);
position:relative; /* adjust position */
left:15%;
top:15%;
}
.border-img {
width: 450px;
height: 500px;
position:fixed;
}
Output
And the output looks like this: