Skip to main content
se añadieron 88 caracteres en el cuerpo
Origen Enlace
DjCrazy
  • 7.1k
  • 3
  • 18
  • 42

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>

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.

.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;
}
<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>

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 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>

Origen Enlace
DjCrazy
  • 7.1k
  • 3
  • 18
  • 42

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.

.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;
}
<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>