Witam,
Mam takie menu: https://tinyurl.com/ya74xwxq

każde menu składa się z kafli (biały DIV na którym znajdują się elementy opisujące potrawę: zdjęcie, opis, nazwa itp).

Po najechaniu kursorem myszki na kafelek uruchamia się animacja na zdjęciu (pokazuje się lupka).
Problem w tym ze czasami zamiast tego efektu pokazuje się szary kwadrat.

Tak to powinno wyglądać: https://tinyurl.com/y7rmxkt6 (animacja działa tylko w oparciu o zdjęcie).
Potrzebuje żeby animacja uruchamiała się zarówno po najechaniu na kafel jak i na zdjęcie.

W tej chwili działa to prawie dobrze, jednak czasami zamiast powyższej animacji pojawia się szary kwadrat. Wie ktoś może jak to naprawić?

Wywal dodawanie klasy o nazwie "mask". Lub wywal css dla tej klasy.

tzn zamiast:

[HTML] pobierz, plaintext 
.hover_div:hover .mask {
    opacity: 1;
    border: 50px solid rgba(0, 0, 0, 0.7);
}
[HTML] pobierz, plaintext 

dać:

[HTML] pobierz, plaintext 
.hover_div:hover{
    opacity: 1;
    border: 50px solid rgba(0, 0, 0, 0.7);
}
[HTML] pobierz, plaintext 

Jeśli tak, to przestaje działać wtedy hover na "kafli"


Chodzi dokładnie o ten błąd:
http://serwer1356363.home.pl/pub/123.png