Si quieres evitar que el efecto `blur` se aplique al texto y a la imagen dentro de cada `<div>`, puedes usar el pseudo-elemento `::before` para aplicar el efecto solo al fondo del `<div>`. Te dejo el código `CSS` corregido y comentado. Si tienes dudas al respecto, deja un comentario. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> .sectionEval { background-image: url("https://loremflickr.com/1080/720?lock=1"); /* Para que se logre ver el efecto */ } .sectionEval div { position: relative; /* Para que el pseudo-elemento se posicione correctamente */ font-size: 30px; padding: 10px 25px; border-radius: 30px; overflow: hidden; /* Ocultar el desenfoque que se extiende más allá del div */ } .sectionEval div::before { content: ""; /* Obligatorio para pseudo-elementos */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(4px); /* Aplicar el desenfoque solo al fondo */ z-index: -1; /* Colocar el pseudo-elemento detrás del contenido */ } .sectionEval div:hover { transform: scale(1.1, 1.1); } .sectionEval h1 { font-size: 60px; /* Evita el uso de mayúsculas */ text-align: center; } .sectionEval img { width: 200px; } <!-- language: lang-html --> <section class="sectionEval"> <h1> Evaluaciones</h1> <div><img src="images/P1.png" align="center">Evaluación - Progresión 1 </div><br> <div><img src="images/P2.png" align="center">Evaluación - Progresión 2 </div><br> <div><img src="images/P3.png" align="center">Evaluación - Progresión 3 </div><br> </section> <!-- end snippet -->