CSS模糊在2行中的6个背景图像上：悬停但不在文本上

Question

.article-image1 {
  height: 256px;
  width: 256px;
}

.article-image1:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: url(http://limootoys.com/wp-content/uploads/gentleman-e1508436248648.png);
  -webkit-filter: grayscale(0) blur(0);
  filter: grayscale(0) blur(0);
  transition: .4s ease-in-out;
}

.article-image1:hover:before {
  -webkit-filter: grayscale(100%) blur(2px);
  filter: grayscale(100%) blur(2px);
  transition: .4s ease-in-out;
}

.ar-image1 {
  position: relative;
  width: 256px;
  height: 256px;
}

.article-image1>p {
  display: none;
}

.article-image1:hover>p {
  position: absolute;
  top: 50%;
  display: block;
  color: #F24909;
  font-size: 40px;
  font-weight: bold;
  z-index: 9999999;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: .4s ease-in-out;
}


/*puzzle*/

.article-image2 {
  height: 256px;
  width: 256px;
}

.article-image2:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: url(http://limootoys.com/wp-content/uploads/puzzle.png);
  -webkit-filter: grayscale(0) blur(0);
  filter: grayscale(0) blur(0);
  transition: .4s ease-in-out;
}

.article-image2:hover:before {
  -webkit-filter: grayscale(100%) blur(2px);
  filter: grayscale(100%) blur(2px);
  transition: .4s ease-in-out;
}

.ar-image2 {
  position: relative;
  width: 256px;
  height: 256px;
  top: 0px;
  right: 256px;
}

.article-image2>p {
  display: none;
}

.article-image2:hover>p {
  position: absolute;
  top: 40%;
  display: block;
  color: #F24909;
  font-size: 40px;
  font-weight: bold;
  z-index: 9999999;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: .4s ease-in-out;
}


/*Maket*/

.article-image3 {
  height: 256px;
  width: 256px;
}

.article-image3:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: url(http://limootoys.com/wp-content/uploads/minivan.png);
  -webkit-filter: grayscale(0) blur(0);
  filter: grayscale(0) blur(0);
  transition: .4s ease-in-out;
}

.article-image3:hover:before {
  -webkit-filter: grayscale(100%) blur(2px);
  filter: grayscale(100%) blur(2px);
  transition: .4s ease-in-out;
}

.ar-image3 {
  position: relative;
  width: 256px;
  height: 256px;
  top: 0px;
  right: 256px;
}

.article-image3>p {
  display: none;
}

.article-image3:hover>p {
  position: absolute;
  top: 40%;
  display: block;
  color: #F24909;
  font-size: 40px;
  font-weight: bold;
  z-index: 9999999;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: .4s ease-in-out;
}


/*figure*/

.article-image4 {
  height: 256px;
  width: 256px;
}

.article-image4:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: url(http://limootoys.com/wp-content/uploads/batman.png);
  -webkit-filter: grayscale(0) blur(0);
  filter: grayscale(0) blur(0);
  transition: .4s ease-in-out;
}

.article-image4:hover:before {
  -webkit-filter: grayscale(100%) blur(2px);
  filter: grayscale(100%) blur(2px);
  transition: .4s ease-in-out;
}

.ar-image4 {
  position: relative;
  width: 256px;
  height: 256px;
  top: 0px;
  right: 0px;
}

.article-image4>p {
  display: none;
}

.article-image4:hover>p {
  position: absolute;
  top: 40%;
  display: block;
  color: #F24909;
  font-size: 40px;
  font-weight: bold;
  z-index: 9999999;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: .4s ease-in-out;
}


/*toys*/

.article-image5 {
  height: 256px;
  width: 256px;
}

.article-image5:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: url(http://limootoys.com/wp-content/uploads/robot.png);
  -webkit-filter: grayscale(0) blur(0);
  filter: grayscale(0) blur(0);
  transition: .4s ease-in-out;
}

.article-image5:hover:before {
  -webkit-filter: grayscale(100%) blur(2px);
  filter: grayscale(100%) blur(2px);
  transition: .4s ease-in-out;
}

.ar-image5 {
  position: relative;
  width: 256px;
  height: 256px;
  top: 0px;
  right: 256px;
}

.article-image5>p {
  display: none;
}

.article-image5:hover>p {
  position: absolute;
  top: 40%;
  display: block;
  color: #F24909;
  font-size: 40px;
  font-weight: bold;
  z-index: 9999999;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: .4s ease-in-out;
}


/*entertaimnt*/

.article-image6 {
  height: 256px;
  width: 256px;
}

.article-image6:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-image: url(http://limootoys.com/wp-content/uploads/magician.png);
  -webkit-filter: grayscale(0) blur(0);
  filter: grayscale(0) blur(0);
  transition: .4s ease-in-out;
}

.article-image6:hover:before {
  -webkit-filter: grayscale(100%) blur(2px);
  filter: grayscale(100%) blur(2px);
  transition: .4s ease-in-out;
}

.ar-image6 {
  position: relative;
  width: 256px;
  height: 256px;
  top: 0px;
  right: 256px;
}

.article-image6>p {
  display: none;
}

.article-image6:hover>p {
  position: absolute;
  top: 40%;
  display: block;
  color: #F24909;
  font-size: 40px;
  font-weight: bold;
  z-index: 9999999;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: .4s ease-in-out;
}

<div class="ar-image1">
  <div class="article-image1">
    <p>Lire plus</p>
    <div class="ar-image2">
      <div class="article-image2">
        <p>Lire plus</p>
        <div class="ar-image3">
          <div class="article-image3">
            <p>Lire plus</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="ar-image4">
  <div class="article-image4">
    <p>Lire plus</p>
    <div class="ar-image5">
      <div class="article-image5">
        <p>Lire plus</p>
        <div class="ar-image6">
          <div class="article-image6">
            <p>Lire plus</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我想模糊6行2行3列的图像。每行中的第一个图像工作正常，但当在一行中的第二个或第三个图像上悬停时，它们之前的图像也变得模糊。如果可能，我希望图像变得模糊时成为可点击的链接（而不是文本）。我该怎么办？ 你还可以看到代码如何在这个地址中运行：limootoys.com