1

Demostración del cómo se ve

Tengo una serie de div que tiene efecto blur como fondo y contienen texto y una imagen, elementos que no se ven afectados por ese efecto.

Empero, cuando hago hover estos dos elementos toman un leve blur que es notable, quisiera saber cómo solucionarlo, por favor.

A continuación dejo el código:

.sectionEval {
  margin: 55px;
  padding: 25px;
  font-family: 'Quicksand', sans-serif;
}

.sectionEval div {
  font-size: 30px;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 25px rgba(0, 0, 0, .3);
  padding: 10px 25px;
  border-radius: 30px;
}

.sectionEval div:hover {
  transform: scale(1.1, 1.1);
}

.sectionEval H1 {
  FONT-SIZE: 60PX;
  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>
  <div><img src="images/P4.png" align="center">Evaluación - Progresión 4 </div><br>
  <div><img src="images/P5.png" align="center">Evaluación - Progresión 5 </div><br>
  <div><img src="images/P6.png" align="center">Evaluación - Progresión 6 </div><br>
  <div><img src="images/P7.png" align="center">Evaluación - Progresión 7 </div><br>
  <div><img src="images/P8.png" align="center">Evaluación - Progresión 8 </div><br>
  <div><img src="images/P9.png" align="center">Evaluación - Progresión 9 </div><br>
  <div><img src="images/P10.png" align="center">Evaluación - Progresión 10 </div><br>
  <div><img src="images/P11.png" align="center">Evaluación - Progresión 11 </div><br>
  <div><img src="images/P12.png" align="center">Evaluación - Progresión 12 </div><br>
  <div><img src="images/P13.png" align="center">Evaluación - Progresión 13 </div><br>
  <div><img src="images/P14.png" align="center">Evaluación - Progresión 14 </div><br>
</section>

2

1 respuesta 1

0

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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.