Efekt hover na wewnętrznym obrazku - po najechaniu myszka na otaczającego DIV

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ć?

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

Źle odnosisz się do elementu .mask w CSS. Klasę mask masz zarówno w elemencie "view second-effect opener mask" jak i dalej w samym elemencie "mask" po img. Żeby zadziało to co chcesz, musisz bardziej doprecyzować w CSSie hover'a tzn odwołać go do tego drugiego elementu mask, czyli:
zamiast `
.hover_div:hover .mask
dać
.hover_div:hover .second-effect > .mask.
Wtedy po najechaniu na element hover_div uruchomisz styl dla docelowego .mask a nie tego poprzedniego.

Działa. Bardzo dziękuje :)