How to blur image in css without leaking?

Question

I would like to learn how to unfurl an image without leaking in Wordpress - Take the example

How do you do!

Answer 1

You can use two images, one with Blur and another without, with a div to insert your text, see:

.conteudo {
     width: 70%;
     height: 70%;
     border: 2px solid;
     border-radius: 20px;
     position: fixed;
     top: 15%;
     left: 15%;
     z-index :10;
     background-color: rgba(255, 255, 255, 0.2);
}
 .bg {
     width: 100%;
     height: 100%;
     background-image: url('https://spguia.melhoresdestinos.com.br/system/fotos_local/fotos/27924/show/jardim-botanico-de-curitiba.jpg');
     z-index: 2;
     position: fixed;
}
 .blurred {
     width:100%;
     height:100%;
     display:block;
     background-image:url('https://spguia.melhoresdestinos.com.br/system/fotos_local/fotos/27924/show/jardim-botanico-de-curitiba.jpg');
     z-index:1;
     position:absolute;
     top:-20%;
     left:-20%;
     padding-left:20%;
     padding-top:20%;
     -webkit-filter: blur(2px);
}
 .mascara {
     width: 70%;
     height: 70%;
     position: fixed;
     top: 15%;
     left: 15%;
     z-index:10;
     overflow:hidden;
}

<div class="bg"></div>
<div class="mascara">
    <div class="blurred"></div>
</div>
<div class="conteudo">
<center><h1>Visite Curitiba!</h1></center>
</div>