Partage
  • Partager sur Facebook
  • Partager sur Twitter

Images servant de lien avec un hover?

Site parodique de https://www.jesuisundev.com/

    21 octobre 2021 à 15:18:49

    Bonjour, 

    je souhaite (pour m'entraîner, ce ne sera jamais publié, je ne veux pas de problèmes), recréer de façon parodique le site https://www.jesuisundev.com/ .

    Ma "création" s'appelle Je suis pas dev, mais je suis bloqué sur un point.. 

    En dessous du sous-titre "Devenir un meilleur développeur et prendre le contrôle de sa carrière", il y a des icônes redirigeant vers différent sites,

    je cherche à reproduire ceci, avec l'animation en bleu quand on passe dessus, mais je suis pas sûr que cela fonctionne sur des images png.

     Need help pls ! :)

    • Partager sur Facebook
    • Partager sur Twitter
      21 octobre 2021 à 15:33:09

      salut ! 

      déja il ne s'agit pas la de simples images mais d'icon qui peuvent etre délivrer par https://fontawesome.com/ par exemple.

      dans leurs cas ils ont creer des balise <a> avec leurs icon à l'intérieur.

      ce qui donne : 

      <a style="padding: 10px 8px;" href="https://twitter.com/jesuisundev" target="_blank" rel="noopener">
          <i class="fab fa-twitter"></i>
      </a>

      si tu inspecte l'élément tu trouvera ce code si dessus.

      donc pour reproduire un effet similaire en css il te faut selectionner ta balise <a> et lui donner du style a la demande du hover

      exemple : 

      a{
      color:black;
      }
      a:hover i{
      color:blue;
      }





      -
      Edité par GaelPitras3 21 octobre 2021 à 15:34:40

      • Partager sur Facebook
      • Partager sur Twitter
        21 octobre 2021 à 18:54:08

        Très GaelPitras3 a écrit:

        salut ! 

        déja il ne s'agit pas la de simples images mais d'icon qui peuvent etre délivrer par https://fontawesome.com/ par exemple.

        dans leurs cas ils ont creer des balise <a> avec leurs icon à l'intérieur.

        ce qui donne : 

        <a style="padding: 10px 8px;" href="https://twitter.com/jesuisundev" target="_blank" rel="noopener">
            <i class="fab fa-twitter"></i>
        </a>

        si tu inspecte l'élément tu trouvera ce code si dessus.

        donc pour reproduire un effet similaire en css il te faut selectionner ta balise <a> et lui donner du style a la demande du hover

        exemple : 

        a{
        color:black;
        }
        a:hover i{
        color:blue;
        }





        -
        Edité par GaelPitras3 il y a environ 3 heures


        Très utile, je vais essayer, merci!
        • Partager sur Facebook
        • Partager sur Twitter

        Images servant de lien avec un hover?

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