Un Texte affiché avec au survole l'apparition d'une image
Testé et installé by Sploutch - tutoriels.xooit









Voici ci-dessous un exemple en situation. Il vous suffira de passer votre souris sur l'image portrait, pour vous rendre comptes de l'effet.















Si cet effet vous plait, copier/coller ci-dessous les codes pour cette exemple. Vous devrez bien sur changer les url des images !
Vous pouvez bien sur nous faire un petit don, pour nous remercier !










Le CSS
/******DEBUT DU CODE CSS POUR EXEMPLE (https://forumtutorielssupports.xoo.it/index.php)******/ /************************DEBUT DU CODE (https://forumtutorielssupports.xoo.it/index.php)************************/ svg{ background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg'); background-size:cover; width:40vmin; height:auto; display:block; margin:30vmin auto; } text{ font-size:10px; transition:font-size .4s ease-out; font-weight:900; font-family:arial; } svg:hover text{ transition:font-size .4s ease-in; font-size: 300px; } /************************FIN DU CODE (https://forumtutorielssupports.xoo.it/index.php)************************/ /******FIN DU CODE CSS POUR EXEMPLE (https://forumtutorielssupports.xoo.it/index.php)******/



Le code HTML
<!------DEBUT DU CODE HTML (https://forumtutorielssupports.xoo.it/index.php)------> <!------DEBUT DU CODE (https://forumtutorielssupports.xoo.it/index.php)------> <svg viewbox="0 0 50 50" width="50" height="50"> <defs> <mask id="mask" x="0" y="0" width="100" height="49"> <rect x="0.5" y="0.5" width="49" height="49" fill="#fff"/> <text x="20" text-anchor="middle" y="50" dy="0">M</text> <text x="25" id="ltrV" text-anchor="middle" y="50" dy="0">-</text> <text x="30" text-anchor="middle" y="50" dy="0">S</text> </mask> </defs> <rect x="0.5" y="0.5" width="49" height="49" mask="url(#mask)" fill-opacity="1" fill="#E3DFD2"/> </svg> <!------FIN DU CODE (https://forumtutorielssupports.xoo.it/index.php)------> <!------FIN DU CODE HTML (https://forumtutorielssupports.xoo.it/index.php)------>