Je construis un bouton en associant une icône Image Sublime, 2 lignes de textes superposées avec un fading qui laissent apparaitre la seconde et un bouton déclencheur en hover. L'effet fonctionne parfaitement avec le code suivant:


.fade-btn {
transition:  opacity 0.8s ease,  background-color 0.8s ease;
    opacity: 1;
}

.fadeout {
  transition: opacity 0.8s ease;
}

.fadein {
      transition: opacity 0.8s ease;
}


.fadein,
.fade-btn:hover .fadeout {
  opacity: 0;
}

.fadeout,
.fade-btn:hover .fadein {
  opacity: 1;
}

.fade-btn:hover {
    background-color: #404040 !important;
    opacity: 1;
}


Avec un texte qui à la même hauteur que l'élément parent, l'effet est parfait, mais si je centre avec les 2 textes avec:


.monTexte {
position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}


Le fading se brouille quelque peu et les lignes bougeottent à la fin de l'effet. C'est pas très esthétique et j'ai pensé masquer cet effet en l'accentuant avec un flou et ces lignes de code:



text-shadow:none;

et

color:transparent;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);


Mais je n'arrive pas à les intégrer correctement pour avoir un flou progressif sur le texte qui s'efface et dégressif sur celui qui apparaît . . . Ou la durée de l'effet disparaît, et quand la souris quitte la zone, la coupure est abrupte sans fading . . .

Un petite aide pour finaliser sera la bienvenue

En passant, ce ne sera pas très utile sur une tablette ou un cellulaire puisqu'il n'y a pas de hover.

Ce code remplace votre code

cadre        sur le panneau d'éléments qui contiens le bouton

monTexte  sur les deux éléments texte

texte1       sur le texte apparaissant par défaut

texte2       sur le texte apparaissant au hover