Quiero agregar el efecto de desenfoque a la imagen de fondo detrás de mis mosaicos y ese aspecto funciona bien, pero por alguna razón también hace que mi información sobre herramientas también se vea borrosa detrás de los divs:

¿Cómo puedo hacer que mi información sobre herramientas se mantenga al tanto de los subsiguientes divs cuando uso el filtro de fondo dentro de mi clase div.tile? Sin el filtro de fondo, todo funciona bien, pero seguramente debe haber alguna manera de lograr el resultado final que estoy buscando sin comprometer mi información sobre herramientas, ¿verdad?

Desafortunadamente, jugar con el índice z aún no ha dado ningún resultado. :(

¡Gracias de antemano por cualquier consejo aquí!

Aquí está el código de muestra mío: Fragmento de código

TLDR:

 div.tile { width: 400px; height: auto; display: inline-block; background: RGBA(24, 24, 19, 0.8); padding-bottom: 30px; backdrop-filter: blur(4px); } .tooltip .tooltiptext-right { visibility: hidden; width: 300px; height: auto; display: inline-block; background-color: rgba(24, 24, 19, 0.9); color: #f9f3c5; text-align: justify; padding: 20px 30px; line-height: 24px; font-size: 17px; /* Position the tooltip */ position: absolute; z-index: 2; margin-top: 0px; margin-left: 0px; }