How to blur image in css without leaking? [duplicate]

Question

How to blur image in css without leaking? [duplicate]

this question already has answers here : DIV / IMG with blurred / blurred background (3 responses) Could anyone tell me how I can do this effect by hovering? (2 responses) Closed 2 years ago .

I would like to learn how to blur an image without leaking in Wordpress - See example

How does that!

0

html php css wordpress wordpress-theme

Author: Levi Oliveira, 2018-08-10

Source

1 answers

score 1 · Answer 1

You can use two images, one with blur and one without, with one 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>