模糊图像并在悬停时显示文本？

Question

我有一个包含 3 列的网格，当我单击其中一个 div 时，它会向下一行并跨越整行，当我再次单击它时，它也会重新关闭。另外，当我打开另一个 div 时，它会关闭所有其他打开的 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;
}

<div id="gridALBUM">
  <div id="one"   ><h1>1</h1> <div><h2> one   </h2></div></div>
  <div id="two"   ><h1>2</h1> <div><h2> two   </h2></div></div> 
  <div id="three" ><h1>3</h1> <div><h2> three </h2></div></div>
  <div id="four"  ><h1>4</h1> <div><h2> four  </h2></div></div>
  <div id="five"  ><h1>5</h1> <div><h2> five  </h2></div></div>
  <div id="six"   ><h1>6</h1> <div><h2> six   </h2></div></div>
  <div id="seven" ><h1>7</h1> <div><h2> seven </h2></div></div>
  <div id="eight" ><h1>8</h1> <div><h2> eight </h2></div></div>
  <div id="nine"  ><h1>9</h1> <div><h2> nine  </h2></div></div>
  <div id="ten"   ><h1>10</h1><div><h2> ten   </h2></div></div>
</div>

Answer 1

一个简单的解决方案可能是在 h1 中添加一个过滤器，在 div 中添加一个背景过滤器（如果您有一些背景图像等）。然后将内容添加到

::after

伪元素。

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;

   &:hover {
      backdrop-filter: blur(10px);
      h1 { filter: blur(10px); }
      &::after {
         content: 'Click for more info';
         align-self: center;
         justify-self: center;
      }
   }

}

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

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

<div id="gridALBUM">
  <div id="one"   ><h1>1</h1> <div><h2> one   </h2></div></div>
  <div id="two"   ><h1>2</h1> <div><h2> two   </h2></div></div> 
  <div id="three" ><h1>3</h1> <div><h2> three </h2></div></div>
  <div id="four"  ><h1>4</h1> <div><h2> four  </h2></div></div>
  <div id="five"  ><h1>5</h1> <div><h2> five  </h2></div></div>
  <div id="six"   ><h1>6</h1> <div><h2> six   </h2></div></div>
  <div id="seven" ><h1>7</h1> <div><h2> seven </h2></div></div>
  <div id="eight" ><h1>8</h1> <div><h2> eight </h2></div></div>
  <div id="nine"  ><h1>9</h1> <div><h2> nine  </h2></div></div>
  <div id="ten"   ><h1>10</h1><div><h2> ten   </h2></div></div>
</div>