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>