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>
.
Evita el uso de mayúsculas para definir las reglas en CSS
y también para nombrar las etiquetas HTML
. Ambas cosas quedaron corregidas en el ejemplo.
Te dejo el código CSS
corregido y comentado. Si tienes dudas al respecto, deja un comentario.
.sectionEval {
margin: 55px;
padding: 25px;
font-family: 'Quicksand', sans-serif;
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;
}
<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>