Texte sur image ou autre

Code d'un article publié, où un texte apparaît au survol d'un image ou d'une vidéo.

Le principe est de placer l'élément visible dans un cadre qui cache ce qui en dépasse.

L'élément qui apparaît au survol de l'élément visible est placé en dehors et glisse à l'intérieur au survol d'un bouton invisible, qui recouvre l'ensemble du montage.

L'idée de la visiteuse qui me demande le code est de placer les paroles d'une chanson au dessus de la vidéo.

<div style="width: 1000px; height: 563px; margin: 10px auto; background: url('http://ekladata.com/U8QJEDtYyZDWOjkj361b4A3d2Ms.jpg'); background-size: 1000px 563px; border: 6px ridge white; overflow: hidden;">
<p id="bg0">&nbsp;</p>
<p id="bg1"><br />Une feuille<br /> ou<br /> un narval ?<br /><br />La licorne de mer.</p>
</div>

<style><!--
#bg0{position:absolute; z-index:5; width:1000px; height:563px; transform:translate(0px,0px);}
#bg1{z-index:1; width:1000px; height:563px; text-align:center;background:rgba(255,255,200,0.7); font-size:6vh; transform:translate(0px,-563px); transition:all 1s linear;}
#bg0:hover ~ #bg1{ transform:translate(0px,0px);}
--></style>

Si ce système peut convenir au dessus d'une image ou, à l'inverse, une image au dessus d'un texte, cela ne convient pas au dessus d'une e-frame car il ne faut pas que son survol provoque l'apparition du texte et empêche de lancer la vidéo !

Je propose donc le texte animé au clic sur un bouton toujours visible; la vidéo est lancée et le clic sur le bouton fait descendre le texte (ou animation latérale); la couleur de fond du texte est demi-transparente pour laisser voir la vidéo qui se déroule et un clic hors montage fait remonter le texte.

Cependant, si le texte est long, il faudra trouver le moyen de le caser dans la surface de l'élément animé; ou alors, il faut modifier le code pour que le paragraphe s'agrandisse au lieu d'être placé en dehors du montage !

Voyons une première solution:

<div style="width: 960px; height: 720px; margin: 10px auto; border: 6px ridge white; overflow: hidden;"><input id="bz1" type="text" value="clic texte paroles" />
<p id="bz0">&nbsp;</p>
<div style="position: absolute; z-index: 1;"><iframe style="position: absolute; width: 960px; height: 720px; left: 0;" src="https://www.youtube.com/embed/2ICFtXx546A?ecver=2" frameborder="0" width="960" height="720" allowfullscreen="allowfullscreen"></iframe></div>
<div id="bz2">
<p style="width: 300px; float: left; margin: 100px 0 0 20px;">On est bien peu de chose<br /> Et mon a-mie la rose<br /> Me l'a dit ce ma-tin<br /> &Agrave; l'au-rore je suis n&eacute;e<br /> Bap-ti-s&eacute;e de ro-s&eacute;e<br /> Je me suis &eacute;-pa-nouie<br /> Heu-reuse et a-mou-reuse<br /> Aux ray-ons du so-leil<br /> Me suis fer-m&eacute;e la nuit<br /> Me suis r&eacute;-veil-l&eacute;e vieille<br /> Pour-tant j'&eacute;-tais tr&egrave;s belle<br /> Oui j'&eacute;-tais la plus belle<br /> Des fleurs de ton jar-din</p>
<p style="width: 300px; float: left; margin: 150px 0 0 0;">On est bien peu de chose<br /> Et mon a-mie la rose<br /> Me l'a dit ce ma-tin<br /> Vois le Dieu qui m'a faite<br /> Me fait cour-ber la t&ecirc;te<br /> Et je sens que je tombe<br /> Et je sens que je tombe<br /> Mon c&oelig;ur est pres-que nu<br /> J'ai le pied dans la tombe<br /> D&eacute;-j&agrave; je ne suis plus<br /> Tu m'ad-mi-rais hi-er<br /> Et je se-rai pous-si&egrave;re<br /> Pour tou-jours de-main</p>
<p style="width: 300px; float: left; margin: 200px 0 0 0;">On est bien peu de chose<br /> Et mon a-mie la rose<br /> Est mor-te ce ma-tin<br /> La lu-ne cet-te nuit<br /> A veil-l&eacute; mon a-mie<br /> Moi en r&ecirc;-ve j'ai vu<br /> &Eacute;-blou-is-sante et nue<br /> Son &acirc;-me qui dan-sait<br /> Bien au-de-l&agrave; des nues<br /> Et qui me sou-ri-ait<br /> Croit ce-lui qui peut croire<br /> Moi j'ai be-soin d'es-poir<br /> Si-non je ne suis rien<br /><br /> Ou bien si peu de chose<br /> C'est mon a-mie la rose<br /> Qui l'a dit hier ma-tin.</p>
</div>
</div>
<style><!--
#bz0{position:absolute; z-index:5; width:100px; height:30px; transform:translate(100px,0px);}
#bz1{position:absolute; z-index:10; width:120px; height:20px; transform:translate(700px,20px);}
#bz2{z-index:1; width:960px; height:720px; background:rgba(200,200,100,0.7); font-size:2vh; transform:translate(0px,-720px); transition:all 1s linear;}
#bz1:focus ~ #bz2{ transform:translate(0px,0px);}
--></style>

Essayons d'agrandir l'élément texte au lieu de le cacher d'abord et de le faire glisser; nous ne pouvons que le rendre transparent puis opaque, au clic sur le bouton.

Le texte dépassera de la vidéo mais restera dans le montage.