Размыть изображение и показать текст при наведении? ⇐ CSS

[Anonymous]

У меня есть эта сетка с тремя столбцами, и когда я нажимаю на один из элементов div, она перемещается вниз по строке и охватывает всю строку, а также снова закрывается, когда я нажимаю на нее снова. Кроме того, когда я открываю другой div, он закрывает все остальные, если они открыты. чтобы одновременно открывался только один объект
как мне сделать так, чтобы при наведении на него курсора элемент div размывался и в середине отображалось "Нажмите, чтобы получить дополнительную информацию" ? я думал добавить div с текстом на каждом из них, но это кажется слишком однообразным... есть ли более простой способ сделать это?

Код: Выделить всё

document.querySelectorAll('#gridALBUM > div').forEach((D,_,A)=>
{
D.addEventListener('click', e=>
{
if (D.classList.toggle('span'))
A.forEach(d =>{ if(d!=D) d.classList.remove('span') });
})
})

Код: Выделить всё

#gridALBUM {
margin: 50px auto;
max-width: 908px;
display: grid;
grid-gap: 0 4px;
grid-template-columns: repeat(3, 300px);
grid-auto-flow: dense;
background-color: lightblue;
}

#gridALBUM > div {
border  : 1px solid black;
display : flex;
}

#gridALBUM > div:not(.span) > div {
display : none;
}

#gridALBUM > div.span {
grid-column      : 1 / 4;
background-color : #47479c;
}

Код: Выделить всё

1  one   
2  two   
3  three 
4  four  
5  five  
6  six   
7  seven 
8  eight 
9  nine  
10 ten   

Подробнее здесь: https://stackoverflow.com/questions/790 ... t-on-hover