• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Problem z rozmyciem elementów ( efektem blur ).

0 głosów
30 wizyt
pytanie zadane 11 maja w HTML i CSS przez Jakub 0 Stary wyjadacz (13,310 p.)
edycja 11 maja przez Jakub 0

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 :)
 

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 1,056 wizyt
pytanie zadane 6 lipca 2015 w HTML i CSS przez Eimens Maniak (69,180 p.)
0 głosów
1 odpowiedź 97 wizyt
pytanie zadane 9 lipca 2017 w HTML i CSS przez Kamil M Bywalec (2,210 p.)
0 głosów
1 odpowiedź 41 wizyt
Porady nie od parady
Zadając pytanie postaraj się o szczegółowe opisanie problemu oraz udostępnienie wszystkich istotnych informacji (kody źródłowe, zrzuty ekranu itp.).Opisanie problemu

65,727 zapytań

112,367 odpowiedzi

237,225 komentarzy

46,687 pasjonatów

Przeglądających: 119
Pasjonatów: 0 Gości: 119

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...