zoom texte

Une page qui n'apprendra pas grand chose à qui que ce soit mais ce n'est qu'un rappel.

Sur des blogs étroits, on peut souhaiter placer un cadre texte mais qui ne prenne pas trop de place.

Dans ce cas, on peut l'agrandir au survol et agrandir en même temps la taille de la police.

Si le texte est trop long, on cache ce qui dépasse, au départ et on le fait s'afficher au survol.

<div id="zz">
<p>Une page qui n'apprendra pas grand chose &agrave; qui que ce soit mais ce n'est qu'un rappel.</p>
<p>Sur des blogs &eacute;troits, on peut souhaiter placer un cadre texte mais qui ne prenne pas trop de place.</p>
<p>Dans ce cas, on peut l'agrandir au survol et agrandir en m&ecirc;me temps la taille de la police.</p>
<p>Si le texte est trop long, on cache ce qui d&eacute;passe, au d&eacute;part et on le fait s'afficher au survol.</p>
</div>
<style><!--
#zz{position:absolute; width:15vw; height:auto; transform:translate(0vw,0vh); border:0.1vw solid black; text-align:center; font-size:1vh; background:white; transition:all 0.5s linear;}
#zz:hover{z-index:2; width:50vw; border:0.3vw double black; font-size:3vh;}
--></style>

On peut également cacher ce qui dépasse et agrandir

Sur des blogs étroits, on peut souhaiter placer un cadre texte mais qui ne prenne pas trop de place.

Dans ce cas, on peut l'agrandir au survol et agrandir en même temps la taille de la police.

Si le texte est trop long, on cache ce qui dépasse, au départ et on le fait s'afficher au survol.

<div id="zy">
<p>On peut &eacute;galement cacher ce qui d&eacute;passe et agrandir</p>
<p>Sur des blogs &eacute;troits, on peut souhaiter placer un cadre texte mais qui ne prenne pas trop de place.</p>
<p>Dans ce cas, on peut l'agrandir au survol et agrandir en m&ecirc;me temps la taille de la police.</p>
<p>Si le texte est trop long, on cache ce qui d&eacute;passe, au d&eacute;part et on le fait s'afficher au survol.</p>
</div>
<style><!--
#zy{position:absolute; width:15vw; height:5vh; transform:translate(0vw,0vh); border:0.1vw solid black; text-align:center; font-size:1.5vh; background:white; transition:all 0.5s linear; overflow:hidden;}
#zy:hover{z-index:2; width:50vw; height:auto; border:0.3vw double black; font-size:3vh;}
--></style>