Problem z :hover (CSS) w WordPressie

Dla specjalistów Webmastering
#1

Dostosowuję szablon i mam problem z efektem :hover przy obrazkach. Obrazki na stronie mam ustawione na odcień szarości

filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-webkit-transition: .35s ease-in-out;
-o-transition: .35s ease-in-out;
transition: .35s ease-in-out;

z przejściem na kolor po najechaniu kursorem.

Chcę zostawić ten efekt: [http://themes.kadencethemes.com/ascend/blog-style-photo/], a jednocześnie zachować powrót do kolorów.
Podpowie ktoś?

#2

Sprawdź czy nic nie zasłania grafik np. jakiś div - tyle zauważyłem jak próbowałem dodać odcienie szarości do tego przykładu z powiększaniem grafik.

Powyżej masz przykład z połączeniem efektów (lepiej widać na opcji “edit on CODEPEN”) - zobacz na ile jesteś w stanie taki gotowy kod zrozumieć jak działa.

#3

Dziękuję za odpowiedź.

Kod rozumiem, odcienie szarości i powrót do kolorów dodałam do wszystkich obrazków na stronie - działa.
Tu, gdzie nie działa chyba problemem jest tło, które prawdopodobnie zasłania. Właśnie z tym nie potrafię sobie poradzić.

Wg mnie chodzi o ten fragment:

.blog_photo_item .photo-post-bg {
position: absolute;
opacity: .5;
-webkit-transition: opacity .35s ease-in-out;
-o-transition: opacity .35s ease-in-out;
transition: opacity .35s ease-in-out;
width: 100%;
height: 100%;
background: rgba(0,0,0,0);
background: -moz-linear-gradient(bottom,rgba(0,0,0,.8) 0,rgba(0,0,0,0) 40%);
background: -webkit-linear-gradient(bottom,rgba(0,0,0,.8) 0,rgba(0,0,0,0) 40%);
background: -o-linear-gradient(bottom,rgba(0,0,0,.8) 0,rgba(0,0,0,0) 40%);
background: -ms-linear-gradient(bottom,rgba(0,0,0,.8) 0,rgba(0,0,0,0) 40%);
background: linear-gradient(to top,rgba(0,0,0,.8) 0,rgba(0,0,0,0) 40%);
}