28172 sujets

CSS et mise en forme, CSS3

[Résolu] Changer d'image au survol

Bonjour,
Je ne suis pas très expérimentée.
Pour créer un lien vers mon compte instagram, je veux mettre une image cliquable qui change de couleur au survol.
J'ai donc créé 2 images de couleurs différentes.

Mon html est le suivant :
<div id="menu">
<a href="url de mon compte insta">
<img src="url de mon image pas defaut" alt="compte instagram" width="20px" height="20px" class="alignnone size-medium wp-image-232" />
</a>
</div>

Ma CSS est la suivante :
#menu a{
display: inline-block;
background: url("url image au survol") no-repeat;
}
#menu a:hover img{
visibility: hidden
}
#menu a, #menu img {
width : 20px;
height: 20px;
}

"L'image au survol" n'apparaît pas au survol. Avez-vous la solution ?
Merci beaucoup.
Modérateur
Bonjour,

Ca al'air de bien marche comme ça. SI ton image au survol est trop grand il faudrait que tu utilise background-size: contain ou cover ou mieux : que tu la resize a 20x20px pour pas qu'elle soit plus lourde que necessaire :
https://jsfiddle.net/kye2rno8/


Sinon si tu veux rester sur du CSS only et via le background-image tu peux utiliser directement le <a> avec un background-image en CSS pour ta première image :
<a class="instalink" href="url de mon compte insta"></a>

.instalink {
    width : 20px;
    height: 20px;
    display: inline-block;
    background: url("url image") no-repeat;
}
.instalink:hover {
    display: inline-block;
    background-image: url("url image au survol");
}


Bonne journée !
Meilleure solution
Sujet clos
Aller à