Background-color dépasse de l'icone

Sujet résolu

8 septembre 2021 à 15:29:51

Bonjour à tous,

Je suis sur le parcours Développeur Web. Je dois réaliser une animation dans laquelle un coeur se remplit au survol de la souris sur le coeur.

J'ai écris le code HTML suivant :

<!DOCTYPE html>
<html lang="fr-FR">
<head>
    <meta charset="UTF-8">
    <title>Essai de remplissage du coeur</title>
    <script src="https://kit.fontawesome.com/1561b8564b.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="public/css/style.css" type="text/css" />
</head>
<body>
    <i class="far fa-heart fa-0.5x body__heart"></i>
</body>
</html>

Et le code CSS est le suivant :

.body__heart {
  margin-top: 25px;
  margin-right: 20px;
  z-index: 1;
  position: relative;
}
.body__heart:hover::after {
  transform: scaleY(1);
}
.body__heart::after {
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  background-image: linear-gradient(#9356DC, #FF79DA);
  z-index: -1;
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 0.3s;
}

/*# sourceMappingURL=style.css.map */

En soit, l'animation fonctionne parfaitement. Le fond s'anime avec scaleY() au survol du coeur. Le problème, en fait, est que le background n'épouse pas la forme du coeur mais forme tout simplement un carré. Une idée de comment faire ?

Je précise que j'ai essayé de fixer le problème avec background-clip mais visiblement, ce n'était pas un bon choix :euh:

Merci d'avance pour votre aide

-
Edité par BenoitPuech1 8 septembre 2021 à 15:30:21

Lord Morpheus

8 septembre 2021 à 16:40:56

Bonjour,

Ce que tu souhaites faire en l'état est tout bonnement impossible. Il vas falloir que tu penses autrement que d'utiliser un glyph.

Tu pourrai par exemple gérer cela avec une image. Voici ce que je peu te proposer rapidement : https://jsfiddle.net/16ojmx95/

-
Edité par Lord Morpheus 8 septembre 2021 à 16:44:45

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

BenoitPuech1

13 septembre 2021 à 22:27:05

Salut,

Désolé d'avoir tardé à répondre. Merci beaucoup pour ta réponse et ta solution. Ce fut très inspirant. Tout fonctionne parfaitement, désormais

Hala Iman Zizi

23 avril 2022 à 2:17:34

Hello,

Je tombe également sur le même problème avec l'icone heart, es qu'il y a moyen de savoir comment vous avez fait? J'ai cherché partout !!!!