27402 sujets

CSS et mise en forme, CSS3

Bonjour,

Je tente de réaliser une animation dynamique un peu complexe avec du HTML et du CSS et je ne m'en sors pas, c'est un vrai casse-tête.

Pour faire au plus simple : imaginez une image qui servirait de lien, lorsque qu'on passerait dessus l'image disparaîtrait, laissant apparaître un mot en son centre ayant comme couleur de police l'image précédemment présente. L'image disparaitrait et deviendrait la couleur de la police. Quand on n'aurait pas le curseur sur l'image, la police ne serait donc pas visible, mais lorsqu'on passerait sur l'image elle apparaîtrait et l'image partirait.

Je pense que l'utilisation d'une opacity à 0 pour la police pourrait être une piste, puisqu'elle prendrait la couleur de l'image. Je coince pour faire disparaître l'image mais qu'elle soit encore présente comme couleur de police.

N'hésitez à me demander si vous avez besoin de plus d'éléments.

Je vous remercie à l'avance de votre aide Smiley smile
Hello,

tu veux un texte de ce style ?

<div class="backText">HELLO</div>



.backText {
	font-size: 50px;
	background-clip: text;
	color: transparent;
	background-image:url('https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg');
}