CSS opacity - dlaczego to.. działa?

Question

Witam, chciałem sobie zrobić lekką wersje hover do zdjęć i zrobiłem coś takiego. figcaption, czyli opis ma display: none; i opacity: 1  po najechaniu na img figcaption zmienia się na display block i dodaje opacity 0 (? dlaczego opacity 0 działa)
Czy nie powinno być tak, że początkowo figcaption ma display none i opacity 0 a dopiero po najechaniu zeby wywolac efekt pojawiania sie opacity zmienia sie na 1 ?
+ jak bez dodawania kolejnych divów zrobić, żeby na opacity działało transition podczas gdy kursor już nie najeżdża na obrazek?

Kod: http://codepen.io/FoxCode/pen/apdrWW

Answer 1

Bo figcaption jest przezroczyste tylko wtedy, gdy kursor jest na obrazku. W chwili, gdy dostanie display: block, kursor nie jest już dłużej na obrazku tylko na samym figcaption, stąd jest aplikowane opacity z figure figcaption.

+ jak bez dodawania kolejnych divów zrobić, żeby na opacity działało transition podczas gdy kursor już nie najeżdża na obrazek?

Nie używać nieanimowalnego display tylko pobawić się visibility.