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 !

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 Baiiawai 21 octobre 2021 à 15:34:40

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!