Art.30.5.21

Dans le style du montage où l'on fait apapraître le descroptif au survol d'un image, voici un peu l'inverse: le survol du texte fait apparaître un bouton faisant afficher une image.

<div style="position: relative; overflow: hidden; width: 1000px; height: 562px; margin: 10px auto; text-align: left; border: 1px solid black;">
<p id="df0">Survol chaque cadre puis clic sur le lien</p>
<p id="df1" class="df">Titre 1<br />Suite article 1<br /><br />Dans ce cadre comme dans les autres, vous pouvez &eacute;crire un article et pr&eacute;senter une image sur le sujet au clic sur le bouton.<br /><br />En hauteur, le texte qui d&eacute;passe ne sera pas affich&eacute; mais appara&icirc;tra &agrave; l'agrandissement du cadre comme vous le voyez en survolant cette zone.</p>
<p id="df2" class="df">Titre 2<br />Suite article2<br /><br />Le itre de votre article indiquera le sujet trait&eacute; que l'image viendra illustrer.</p>
<p id="df3" class="df">Titre 3<br />Suite article3<br /><br />Pour effacer l'image qui appara&icirc;t, clic dessus.</p>
<p id="df4" class="df">Titre 4<br />Suite article4<br /><br />Le texte de votre article est &agrave; &eacute;crire en survolant chaque zone pour qu'elle s'agrandisse.<br /><br />Vous pouvez placer des images dans chaque zone.</p>

<input id="ln1" class="ln" type="text" value="Lien 1" /> <input id="ln2" class="ln" type="text" value="Lien 2" /> <input id="ln3" class="ln" type="text" value="Lien 3" /> <input id="ln4" class="ln" type="text" value="Lien 4" />
<p id="mg1" class="mg">image 1</p>
<p id="mg2" class="mg">image 2</p>
<p id="mg3" class="mg">image 3</p>
<p id="mg4" class="mg">image 4</p>
</div>
<style><!--
#df0{position:absolute; z-index:1; box-sizing:border-box; border:1px solid black; width:1000px; height:40px; line-height:40px; font-size:25px; text-align:center; background:pink; transform:translate(0px,0px);}
.df{position:absolute; z-index:1; overflow:hidden; width:250px; height:522px; padding:10px; border:1px solid black; font-size:20px; text-align:center; transition:all 1s;}
#df1{box-sizing:border-box;transform:translate(0px,40px); background:rgba(100,100,100,1);}
#df2{box-sizing:border-box;transform:translate(250px,40px); background:rgba(100,200,100,1);}
#df3{box-sizing:border-box;transform:translate(500px,40px); background:rgba(100,100,200,1);}
#df4{box-sizing:border-box;transform:translate(750px,40px); background:rgba(200,100,100,1);}
#df1:hover,#df2:hover,#df3:hover,#df4:hover{z-index:5; width:1000px; height:562px;  transform:translate(0px,0px);}
 #df1:hover ~ #ln1,#df2:hover ~ #ln2,#df3:hover ~ #ln3,#df4:hover ~ #ln4{display:block;}
.ln{position:absolute; z-index:6; width:80px; text-align:center; font-size:20px; color:red; display:none;}
#ln1{transform:translate(80px,520px);}
#ln2{transform:translate(330px,520px);}
#ln3{transform:translate(580px,520px);}
#ln4{transform:translate(830px,520px);}
.mg{position:absolute; z-index:10; width:1000px; height:562px; transform:translate(1000px,0px); transition:all 1s;}
#mg1{background:url('http://ekladata.com/aCZ2wPoYuCUM7ok0eRCZuH9tko0.jpg'); background-size:cover;}
#mg2{background:url('http://ekladata.com/MnahB_M-2wxcToRvLzBzEW_sSy4.jpg'); background-size:cover;}
#mg3{background:url('http://ekladata.com/e8oxjM4rGkpMAkw8sc3VRASxJh8.jpg'); background-size:cover;}
#mg4{background:url('http://ekladata.com/GemeN99TTrMCXNYEHix4OYvWXPU.jpg'); background-size:cover;}
#ln1:focus ~ #mg1,#ln2:focus ~ #mg2,#ln3:focus ~ #mg3,#ln4:focus ~ #mg4{transform:translate(0px,0px);}
--></style>