Problem z rozmyciem elementów ( efektem blur ).

Question

Witam, mam problem z osiągnięciem pewnego efektu, oto fragment kodu HTML:
 

<section class="homePageArticles">

               <a class="homePageGrpahicsAttachment" href="#">
                    <art class="history">
                        <div class="history_window"></div>
                        <h3 class="encouragementHeadline">Historia komputerów:</h3>
                        <p class="encouragementArticle"> Sed eget gravida diam. Vivamus congue ante dui, ac consequat mauris        fermentum sit amet. Morbi gravida est a augue egestas vestibulum. Duis non risus dui. Nullam eu volutpat    justo. Curabitur aliquet, nunc at dapibus dapibus, lectus nunc faucibus tellus, quis fermentum nulla erat   vestibulum magna.</p>
                    </art>
               </a>

               <a class="homePageGrpahicsAttachment" href="#">
                    <art class="working">
                        <div class="working_window"></div>
                        <h3 class="encouragementHeadline">Działanie współczesnej technologii:</h3>
                        <p class="encouragementArticle"> Sed eget gravida diam. Vivamus congue ante dui, ac consequat mauris fermentum sit amet. Morbi gravida est a augue egestas vestibulum. Duis non risus dui. Nullam eu volutpat justo. Curabitur aliquet, nunc at dapibus dapibus, lectus nunc faucibus tellus, quis fermentum nulla erat vestibulum magna.</p>
                    </art>
               </a>

                <div class="cls"></div>

                <a class="homePageGrpahicsAttachment" href="#">
                    <art class="structure">
                        <div class="structure_window"></div>
                        <h3 class="encouragementHeadline">Elementy składowe komputerów:</h3>
                        <p class="encouragementArticle"> Sed eget gravida diam. Vivamus congue ante dui, ac consequat mauris fermentum sit amet. Morbi gravida est a augue egestas vestibulum. Duis non risus dui. Nullam eu volutpat justo. Curabitur aliquet, nunc at dapibus dapibus, lectus nunc faucibus tellus, quis fermentum nulla erat vestibulum magna.</p>
                    </art>
                </a>

                <a class="homePageGrpahicsAttachment" href="#">
                    <art class="future">
                        <div class="future_window"></div>
                        <h3 class="encouragementHeadline">Fizyka kwantowa &equals; przyszłość:</h3>
                        <p class="encouragementArticle"> Sed eget gravida diam. Vivamus congue ante dui, ac consequat mauris fermentum sit amet. Morbi gravida est a augue egestas vestibulum. Duis non risus dui. Nullam eu volutpat justo. Curabitur aliquet, nunc at dapibus dapibus, lectus nunc faucibus tellus, quis fermentum nulla erat vestibulum magna.</p>
                    </art>
                </a>

                <div class="cls"></div>

            </section>

I fragment CSS:

/* main website content */

.homePageArticles {
    margin-top: 50px;
    margin-bottom: 50px; 
    padding: 50px;
}

.homePageArticles:hover a art {
   filter: blur(5px);
}

/*----------------------------------------------------*/

.history {
    width: 450px;
    height: 450px; 
    float: left; 
    overflow: hidden; 
    text-align: justify;
    padding: 25px;

}

.history_window {
    width: 400px;
    height: 200px;
    background-image: url('../img/1.jpg');
    background-attachment: fixed;
    background-size: cover; 
}

.history:hover {
    background-color: #2e2c2c;
    filter: blur(0);
}

/*----------------------------------------------------*/

.working {
    width: 450px;
    height: 450px; 
    float: left; 
    overflow: hidden; 
    text-align: justify;
    padding: 25px;

}

.working_window {
    width: 400px;
    height: 200px;
    background-image: url('../img/3.jpg');
    background-attachment: fixed;
    background-size: cover; 
}

.working:hover {
    background-color: #2e2c2c;
    filter: blur(0);
}

/*----------------------------------------------------*/

.structure {
    width: 450px;
    height: 450px; 
    float: left; 
    overflow: hidden; 
    text-align: justify;
    padding: 25px;

}

.structure_window {
    width: 400px;
    height: 200px;
    background-image: url('../img/5.jpg');
    background-attachment: fixed;
    background-size: cover; 
}

.structure:hover {
    background-color: #2e2c2c;
    filter: blur(0);
}

/*----------------------------------------------------*/

.future {
    width: 450px;
    height: 450px; 
    float: left; 
    overflow: hidden; 
    text-align: justify;
    padding: 25px;

}

.future_window {
    width: 400px;
    height: 200px;
    background-image: url('../img/4.jpg');
    background-attachment: fixed;
    background-size: cover; 
}

.future:hover {
    background-color: #2e2c2c;
    filter: blur(0);
}

/*----------------------------------------------------*/

.encouragementHeadline {
    padding-top: 10px; 
    padding-bottom: 10px; 

    color: #2c9bdb;
    text-align: left;
    font-weight: bold;  
}

.encouragementArticle {
    font-size: 17px; 

    color: white; 
    text-align: justify;
    font-weight: normal; 
}

/*----------------------------------------------------*/

.homePageGrpahicsAttachment:link, .homePageGrpahicsAttachment:visited {
    text-decoration: none; 
}

Chcę by po najechaniu na pewne menu doszło do zamazania jego zawartości:

.homePageArticles:hover a art {
   filter: blur(5px);
}

z wyjątkiem elementu na którym aktualnie trzymamy kursor, np:

.history:hover {
    background-color: #2e2c2c;
    filter: blur(0);
}

Jednak efekt jest taki:

Jak widać rozmazywana jest cała zawartość. Co powinienem zmienić/poprawić? Z góry dziękuje wam za pomoc i pozdrawiam :)