Légende hover sur un iframe player vimeo ne fonctionne pas

Hello !
c'est vraiment une question bête que je viens poser mais je n'arrive pas à m'en sortir avec ça :
J'ai une page avec des images, quand on passe la souris dessus la légende apparait en dessous. Je n'arrive pas à reproduire ce système sur une vidéo vimeo mais je ne comprend pas pourquoi :

https://codepen.io/marie-fran-oise-talbot/pen/XLyOpG

La légende 1 est correctement placée, (elle apparait sous l'image quand hover) mais la légende 2 sur la vidéo c'est n'imorte quoi. J'ai essayé de tourner le truck dans tous les sens ça fonctionne pas et google ne m'aide pas du tout....
Des idées ? Merci !

EDIT :

le problème c'est ton <p>, tu peux pas mettre une iframe dedans...

Si tu inspecte la console, tu vois bien que ta legende <span> n'a aucun CSS et d'ailleurs on le voit sans inspecter la console, car la légende 2 est visible directement à l'arrivé...
Modifié par JENCAL (09 Jul 2019 - 10:14)

En plus du problème indiqué par JENCAL, ton style:

.image img:hover + span  { visibility: visible;  }

n'aura pas d'effet sur le second élément, vu qu'il n'y a pas de balise img

Hello merci pour vos réponses, oui c'est un peu le bazar parce que j'ai pris un bout de mon code entier. J'ai fait un nouveau codepen nettoyé et dans lequel j'identifie exactement ce que je ne comprend pas :

https://codepen.io/marie-fran-oise-talbot/pen/bPzeZZ

Je ne comprend pas très bien les frames, je n'arrive pas à adapter la vidéo à 100% dans le cadre (qui lui est correctement placé dans la colonne), tous les styles se mettent sur le cadre, pas sur la vidéo à l'intérieur. ???
Merci