Partage
  • Partager sur Facebook
  • Partager sur Twitter

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

    • Partager sur Facebook
    • Partager sur Twitter
      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

      • Partager sur Facebook
      • Partager sur Twitter

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

        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 :)

        • Partager sur Facebook
        • Partager sur Twitter

        Background-color dépasse de l'icone

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        • Editeur
        • Markdown